三、CSS选择器
1、传统2.1选择器
1）标签选择器和id选择器
标签选择器直接使用元素标签名当作选择器，将选择页面上所有该种标签，无论这个标签所处位置的深浅，因为其选择覆盖面较大，所以常用于标签的初始化。
<style>
ul{
/*去掉无序列表的小圆点*/
list-style:none;
}
a{
/*去掉超级链接下划线*/
text-decoration:none;
}
</style>
id选择器
标签可以有id属性，是这个标签的唯一标识，id的名字只能由<u>字母、数字、下划线、短横</u>构成，且<u>不能以数字开头</u>，字母区分大小写，但习惯上一般为小写字母。同一个页面不能有相同id。
id选择器可以使用#id选择指定id的标签，并且可以使用多次
<p id="para1">我是一个段落</p>
<style>
#para1 {
color:red;
}
#para1 {
font-size:10;
}
</style>
2）class选择器
class属性表示“类名”，类名命名规范与id的命名规范一致。class类名非常灵活，<u>多个标签可以为相同类名</u>，<u>同个标签可以同时属于多个类，类名用空格隔开</u>。
class选择器使用.class来选择指定class标签
<p class="warning spec"></p>
<style>
.warning{
color:red;
}
</style>
3）原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。HTML标签就可以按需选择其类名了，这样可以很快速的添加一些样式、
<style>
.fs12{
font-size:12px;
}
.fs14{
font-size:14px;
}
.color-red{
color:red;
}
.color-green{
color:green;
}
.color-blue{
color:blue;
}
</style>
<p class="fs12 color-green">
我是一个文字
</p>
4）复合选择器
| 选择器名称 | 示例 | 示例的意义 |
|---|---|---|
| 后代选择器 | .box .spec |
选择类名为box的标签内部的类名为spec的标签 |
| 交集选择器 | li.spec |
选择既是li标签，也属于spec类的标签 |
| 并集选择器 | ul,ol |
选择所有ul和ol标签 |
后代选择器，在CSS选择器中，使用<u>空格表示“后代</u>”。后代选择器可以有多个空格，隔开好几代
/*选择 类名为box 的标签的后代 p标签*/
.box p{
color:red;
}
交集选择器，选择li.spec选择<li>标签中的.spec类
并集选择器，也叫分组选择器，<u>逗号表示分组</u>。表示同时选择所有标签。
选择器可以任何搭配、结合，从而形成符合选择器，我们必须要一目了然的看出选择器代表的含义
5）伪类
添加到选择器的描述性词语，指定要选择的元素的特殊状态，超链接有四个特殊状态。
| 伪类 | 意义 |
|---|---|
a:link |
没有被访问的超链接 |
a:visited |
已被访问的超链接 |
a:hover |
正被鼠标悬停的超链接 |
a:active |
正在被激活的超链接（按下按键还没松） |
a标签的伪类书写要按照顺序，否则会有伪类不生效。
a:hover必须置于a:link和a:visited之后才有效，a:active必须在a：hover之后才有效。而a:link、a:visited两个伪类之间顺序无所谓。
<u>单个使用时可以不管顺序</u>，只有同时使用四个样式中的多个时才需要按照顺序来。
伪类:hover不仅可以用于a标签，还可以用于其他标签上。
2、CSS3新增选择器
1）元素关系选择器
| 名称 | 举例 | 意义 |
|---|---|---|
| 子选择器 | div＞p |
div的所有子标签p |
| 相邻兄弟选择器 | img+p |
图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p~span |
p元素之后的所有同层级span元素 |
子选择器 ＞，当使用＞符号分割两个元素时，他只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。与 后代选择器的区别在于，<u>后代选择器不一定限制是子元素</u>。
相邻兄弟选择器 +，介于两个选择器之间，当第二个元素 紧跟在第一个元素之后，并且两个元素都属于同一个父元素的子元素，则第二个元素将被选中。a+b即选择紧跟在a后面的一个b。
通用兄弟选择器 ~，a~b选择a元素之后的所有和a同层级b元素
2）序号选择器
兼容性IE9（:first-child兼容IE7）
| 举例 | 意义 |
|---|---|
:first-child |
第一个子元素 |
:last-child |
最后一个子元素 |
:nth-child(3) |
第三个子元素 |
:nth-of-type(3) |
第三个某类型子元素 |
:last-of-type |
倒数第一个某类型子元素 |
:nth-last-child(3) |
倒数第三个子元素 |
:nth-last-of-type(3) |
倒数第三个某类型子元素 |
.box p:first-child{ /*选择box类中的第一个子元素p*/
color:red;
}
.box p:last-child{ /*选择box类中的最后一个子元素p*/
color:red;
}
.box p:nth-child(3){ /*选择box类中的第三个子元素p*/
color:red;
} /*若box类中的第三个子元素不是p则该样式不生效*/
.box p:nth-of-type(3){ /*选择box类中的第三个类型为p的子元素*/
clor:red;
}
nth-child()可以写成an+b的形式，表示从b开始每a个选一个，注意不能写成b+an。
2n+1等价于odd，表示奇数；2n等价于even，表示偶数。
3）属性选择器
兼容IE9
| 举例 | 意义 |
|---|---|
img[alt] |
选择有alt属性的img标签 |
img[alt="aaa"] |
选择alt属性为aaa的img标签 |
img[alt^="aaa"] |
选择alt属性以aaa开头的img标签 |
img[alt$="aaa"] |
选择alt属性以aaa结尾的img标签 |
img[alt*="aaa"] |
选择alt属性中含有aaa的img标签 |
img[alt~="aaa"] |
选择alt属性中有空格隔开的aaa字样的img标签 |
img[alt|="aaa"] |
选择alt属性中以aaa-开头的img标签 |
4）CSS3新增伪类
| 伪类 | 意义 |
|---|---|
:empty |
选择空标签 |
:focus |
选择当前获得焦点的表单元素 |
:enabled |
选择当前有效的表单元素 |
:disabled |
选择当前无效的表单元素 |
:checked |
选择当前已勾选的单选按钮或者复选框 |
:root |
选择根元素，即<html>标签 |
5）伪元素
伪元素表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号
::before创建一个伪元素，将其称为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容
::after创建一个伪元素，将其称为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容
::section CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈住的部分）
a::before{ /*在所有a标签内的元素之前会有一个★，即★为所有a标签内部的第一个子元素*/
content:"★";
}
a::after{ /*在所有a标签内的元素最后会有一个☆，即☆为所有a标签内部的最后一个子元素*/
content:"☆";
}
.box::section{ /*用户选中的部分的背景色将会变成红色，默认是蓝色*/
background-color:red;
}
::first-letter会选中某元素中（必须是块级元素)第一个字母
::first-line会选中某元素中（必须是块级元素)第一行全部文字
3、层叠性和选择器权重计算
层叠性：多个选择器可以同时作用于同一个标签，效果叠加
层叠性冲突时：<u>id选择器权重 > class选择器权重 > 标签权重</u> <u>行内样式权>内部样式权重</u>
复杂选择器可以通过（id选择器个数，class选择器个数，标签个数）的形式计算权重
若需要将某条选择器的某条属性提升权重，可以在属性后面写!important（很多公司禁止使用!important,因为这回带来不经意间的样式冲突）
