1 元素选择器:比如p{xxxx},选择文档中所有的p元素;
2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;
3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;
4 或选择器:用逗号连接多个选择器;
5 与选择器:多个选择器紧挨在一起;
6 后代选择器:用空格连接多个选择器;
7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;
8 属性选择器:
(1) 比如p[id],选择标签上有属性“id”的p元素;
(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;
(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;
(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;
(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;
9 p:first-child:既是p元素,也是某元素的第一个孩子;
10 p:last-child:既是p元素,也是某元素的最后一个孩子;
11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;
12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;
13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;
14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”
15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;
16 如果两个选择器优先级相同,那么写在后面的选择器生效;
17 选择器优先级的排列:
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
子选择器还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
.food>li{border:1px solid red}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
[html] view plain copy
<style type="text/css">
.food>li{border:1px solid red}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
</style>
[html] view plain copy
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
.first span{color:red}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
举例:
.food li{
border:1px solid red/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
[html] view plain copy
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>