【前端学习——css篇】2.css选择器的优先级

https://github.com/febobo/web-interview

2.css选择器的优先级

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• 如果存在内联样式，那么 A = 1, 否则 A = 0
• B的值等于 ID选择器出现的次数
• C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 的值等于 标签选择器 和 伪元素 出现的总次数

比如：

#nav-global > ul > li > a.nav-link
1

套用上面的算法，依次求出 A B C D 的值：

• 因为没有内联样式 ，所以 A = 0
• ID选择器总共出现了1次， B = 1
• 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
• 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

而具体比较规则：

• 从左往右依次进行比较 ，较大者优先级更高
• 如果相等，则继续往右移动一位进行比较
• 如果权重相同，则定义顺序靠后的优先，或有标记!important

具体例子：

 <main>
        <div id="container">
            <ul class="menu">
                <li id="item1" class="item1">项目1</li>
                <li class="item2">项目2</li>
                <li class="item3">项目3</li>
            </ul>
        </div>
    </main>
1
2
3
4
5
6
7
8
9

    /* (0,0,1,0) */
    .item2{
        color: red;  
    }
    /* (0,0,1,1) */
    li.item2{
        color: blue;
    }
    /* (0,1,1,1) */
    #container li.item2{
        color:yellow
    }
    /* (0,1,2,1) */
    #container li:nth-child(2).item2{
        color: aqua;
    }
    /* (0,1,2,1) */
    #container .menu li.item2{
        color: pink;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后两个权重相同，所以选择最靠后的选择器，即颜色为粉色。

② 继承的属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

• 字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
1
2
3
4
5
6

• 文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
1
2
3
4
5
6
7
8

• 元素可见性

visibility
1

• 表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
1
2
3
4
5

• 列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
1
2
3

• 引用

quotes：设置嵌套引用的引号类型
1

• 光标属性

cursor：箭头可以变成需要的形状
1

继承中比较特殊的几点：

• a 标签的字体颜色不能被继承
• h1-h6标签字体的大下也是不能被继承的

无继承的属性

• display
• 文本属性：vertical-align、text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位position等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after