HTML5&CSS3——让你的页面美如画（4）
2.CSS选择器
CSS样式表通过CSS选择器定位到样式所需要作用到的元素，然后为这些元素加上相应CSS声明块中的样式内容。CSS选择器主要有以下几种：
（1）标签选择器/元素选择器——使用元素名称直接选中元素，如：
p{ height: 100px; border: 1px solid red; }
（2）类选择器——以点"."开头，后面紧跟一个类名，如：
.first{ font-weight: bold; }
（3）ID选择器——以"#"开头，后面紧跟一个ID名，如：
#second{ color: red; }
（4）普遍选择器——使用"*”表示，表示选择所有元素，如：
*{ margin: 0; }
（5）层次选择器
后代选择器：使用空格” ”隔开两个选择器，例如“ul li”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。
子代选择器：使用“>”隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li，ul的孙子元素li无法被选择到。
相邻同胞选择器：使用 “+” 隔开两个选择器。例如".one+*"表示选择class为"one"元素的下一个兄弟元素。
一般同胞选择器：使用 “~” 隔开两个选择器。例如".one~*"表示选择class为"one"元素的所有兄弟元素。
（6）多选择器——多个选择器并列使用，使用“,”分割，例如"div,.one,#tt"表示选择div元素，class为one的元素以及id为tt的元素。
（7）组合选择器——多个选择器组合使用。例如 "div.one" 表示class为one的div元素。
（8）属性选择器
[attr]：选择具有attr属性的元素、无论该属性的值为什么
[attr=val]：选择具有attr属性的、并且attr的值为val元素。
[attr~=val]：选择具有attr属性的、并且attr的值之一为val的元素。
[attr^=val]：选择具有attr属性的、并且attr的值以val开头的元素。
[attr$=val]：选择具有attr属性的、并且attr的值以val结尾的元素。
[attr*=val]：选择具有attr属性的、并且attr的值包含val的元素。
（9）伪类选择器——以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中，类似筛选功能，如：（n可以为数字、公式和关键字）
:only-child：选择当该元素是其父元素的唯一子元素时的该元素
:first-child：选择当该元素是其父元素的第一个子元素时的该元素
:last-child：选择当该元素的其父元素最后一个子元素时的该元素
:nth-child(n)：选择该元素的第n个元素
: nth-last-child(n)：选择该元素的倒数第n个子元素
:first-of-type：选择其父元素中的第一个该类子元素
:last-of-type：选择其父元素中的最后一个该类子元素
:nth-of-type(n)：选择其父元素的第n个该类子元素
:nth-last-of-type(n)：选择其父元素的倒数第n个该类子元素
（以上为表示子元素的）
:hover：鼠标悬浮在该元素上时
:active：鼠标点击该元素时
:focus：焦点在该元素上时
:enabled：该输入元素已启用时
:disabled：该输入元素禁用时
:checked：该输入元素选中时
:invalid：输入元素输入值非法时
:valid：输入元素输入值合法时
:optional：输入元素可选时
:default：不存在以上提到情况的输入元素
:required：设置了required属性的元素
:in-range：匹配值在指定区间之内的input元素
:out-of-range：匹配值在指定区间之外的input元素
:read-write：可读及可写的元素
:read-only：设置了"readonly"属性的元素
（以上为元素状态相关的）
（10）伪元素选择器——以"::"开头，用在选择器后，用于选择指定的元素，如：
::after：指定元素之后
::before：指定元素之前
::first-letter：指定元素首字母
::first-line ：指定元素首行
::selection：指定元素被选中部分
为使元素背景色等属性，在其因浮动等因素失效时仍然生效，对元素填充内容常用操作：
元素::after{
display: block;
content: “”;
clear: both;
}
可以通过比较叠加到元素上的选择器权值之和（计算）来确定元素最终显示的样式，选择器权值如下：
无限——!important
1000——元素style属性上的样式
100——通过id选择器#选中元素所设置的样式
10——通过class类选择器.、伪类选择器:、属性选择器选中元素所设置的样式
1——通过标签选择器、伪元素选择器::选中元素所设置的样式
0——通配符*
在元素样式中设置!important时，该样式优先级最高，直接确认为最终显示（!important不同样式同时存在时，以出现靠后的!important样式为准）
