CSS选择器和层叠性

层叠式样式表，用来给HTML标签添加样式的语言。美化页面，实现布局。

css3选择器

标签选择器和id选择器、类选择器、复合选择器、伪类选择器

标签选择器和id选择器

标签选择器：直接使用元素标签名当作选择器，将选择页面上所有该种标签；通常用于标签的初始化。

 ul{/* 去掉无序列表的小圆点 */list-style: none;}a{/* 去掉超级链接的下划线 */text-decoration: none;}

id：#id

标签的id属性，是这个标签的唯一标识。id只能由数字、字母、下划线和短横构成，且不能以数字开头，字母区分大小写，但一般用小写字母。

类选择器

class属性：.class

同一个标签可以同时属于多个类，类名用空格隔开

<div class="aaa ddd">多个类名用空格隔开</div>

同一个类可以属于不同的标签

<p class="warning">我是段落</p>
<div class="warning">我是div</div>

复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有ul和ol标签

其中：使用空格表示”后代“

伪类

添加到选择器的描述性词语，指定要选择的元素的特殊状态，eg：超级链接拥有4个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正在被鼠标悬停的超级链接
a:active	正在被激活的超级链接（按下按键还没有松开的状态）

以上，使用时的顺序不能被打乱，必须严格遵守以上的顺序。

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p （父子关系）
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第三个子元素
:nth-of-type(3)	第三个某类型子元素
:nth-last-child(3)	倒数第三个子元素
:nth-last-of-type(3)	倒数第三个某类型子元素

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=”故宫“]	选择alt属性是故宫的img标签
img[alt^="北京"]	选择alt属性以北京开头的img标签
img[alt$="夜景"]	选择alt属性以夜景为结尾的img标签
img[alt*="美"]	选择有alt属性中含有美字的img标签
img[alt~="手机拍摄"]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt\|="参赛作品"]	选择有alt属性以”参赛作品-“开头的img标签

CSS3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即<html>标签

伪元素

虚拟动态创建的元素用”：：“表示

::before：创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容

::after：创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容

::selection：用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter：会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line：会选中某元素中（必须是块级元素）第一行的全部文字

层叠性

多个选择器可以同时作用于同一个标签，效果叠加

权重：

id选择器 > 类选择器 > 标签选择器

复杂的选择器可以通过计算个数（id，class，标签）的形式，计算权重

/* 权重 (2,0,1) */
#box1 #box2 p{
}

!important提升权重：

若要将某个选择器的某条属性提升权重，可以在属性后面写!important

.box1 .box2 .box3 p{color: blue !important;
}