CSS选择器可以准确的查找到指定的标签,使用CSS选择器可以使我们方便为标签定义CSS样式,而不用为每个标签都定义CSS样式。
下面我们讲一下最常用的五种CSS选择器:
一、标签选择器:通常用它来查找HTML中的某一种标签。
例如:
要为HTML中的所有P标签设计样式,可以使用下面的方法
p { font:12px;}
二、id选择器: 通常用它来查找标签中ID为指定值。
例如:
在HTML中有一个这样的标签<div id="menubar"></div>我们可以看到的的id值为menubar,
现在我们要为id值为menubar定义样式,可以这样
#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}
三、类选择器: 类选择器主要用来查找一组相同类型的标签
例如:在HTML中类选择器用来查找标签中属性class为某一类的一组标签如 <span class="da1">
我们可以
.da1 {
color:#f60;
font-size:14px ;
}
这样凡是标签中class为da1的都会应用这个样式。
四、后代选择器:后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式
例如:
li strong {
font-style:italic;
font-weight:800;
color:#f00;
}
给HTML中li标签下的子标签strong标签定义上面的样式
五、群组选择器: 查找一组选择器可以使用群组选择器
例如:当几个选择器都使用一样的样式时,可以使用如下方法
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
注意选择器之间以逗号分隔
实际上CSS选择器的技术不只可以用在CSS上面,也可以用在其它查找DOM元素上面,如JAVASCRIPT框架JQUERY就使用了CSS选择器技术。