1、常用选择器
常用选择器用于查找某一类别的元素,比如段落或者标题。
例:p{font-size:14px;}表示选择所有的段落元素;
2、后代选择器
后代选择器用于查找特定元素或元素组的后代,后代选择器由两个选择器之间的空格表示。
例: div p{font-size:14px;}表示选择所有div元素里的p元素。
3、ID选择器
用于查找指定id的元素,id选择器以#开始。
例:#container{border:1px solid red;}
4、类选择器
用于查找指定类名的元素,以"."开始。
例:.container{border:1px solid red;}
5、伪类选择器
有时候我们需要根据除文档结构以外的其它条件对元素应用样式,比如表单元素或链接的状态,这个时候就需要伪类选择器。
例:a:link{color:red;}
a:visited{color:green;}
a:hover,a:focus,a:active{color:yellow;}
input:focus{border:1px solid red;}
:link和:visited这种的被称为链接伪类,:hover,:focus,:active这种的被称为动态伪类,因为需要在元素上做一些操作才会触发。
注意一点,ie6只注意:active和:hover选择器,会忽略:focus;
ie7支持:hover,会忽略:active,:focus;
6、通用选择器
通用选择器即使用通配符进行选择,虽然功能很强大,但是很少使用,通用选择器使用*表示。
例:*{margin:0px;padding:0px;}
7、子选择器
子选择器和后代选择器都是选择元素的后代,不过区别在于子选择器只选择直属于元素的后代;后代选择器只会选择元素的所有后代(无论是不是直属)。
/*子选择器会选择li1到li5,嵌套的li不会选择*/
.t>li{border:1px solid red;
/*后代选择器选择.t中所有的li元素*/
.t li{background-color:green;}
<ul class="t"> <li id="li1">1</li> <li id="li2">1</li> <li id="li3">1</li> <li id="li4">1</li> <li id="li5"> <ul> <li>11</li> <li>12</li> <li>13</li> <li>14</li> </ul> </li>
</ul>
注意:此选择器IE6不支持;
8、相邻同胞选择器
用于定位同一个父元素下某个元素之后的元素。
/*将选择h2后的第一个p元素*/
h2 + p{background-color:red;}
<h2>This is Title</h2> <p>this is p</p>
<p>myfsdfsdfsd</p>
注意:此选择器IE6不支持;
9、属性选择器
用于选择元素中包含某属性或属性为特定值的元素选择。
例:input[type="text"],input[type="button"],我们可以使用属性选择器为不同的表单元素设置不同的样式。
注意:此选择器IE6不支持。
参考书籍:高级web标准解决方案(第2版)