[JavaScript知识库]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>

复合选择器

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

伪类

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

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

元素关系选择器

序号选择器

属性选择器

CSS3新增伪类

伪元素

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

::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;
}