Front End Treasures
HTML
CSS
JavaScript
前端工程化
附录
HTML
CSS
JavaScript
前端工程化
附录

#2 样式层叠（权重问题）🔥

预计阅读时间: 小于 1 分钟

同一元素，同一个样式被定义了很多次导致样式冲突。

目前我们所知的CSS样式表主要有三种来源：

  • 行内样式：<div style="color: red;"></div>
  • 内部样式表：<style>div {color: red;}</style>
  • 外部样式表：<link rel="stylesheet" href="style.css">

优先级：行内 > 内部 = 外部

那么同一个样式表中，如果有多个样式定义了同一个元素的同一个属性，那么谁的优先级更高呢？

通过不同的选择器选中同一个元素，出现了样式冲突，那么听谁的呢？

基本选择器权重

!important > 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器

复合选择器权重计算

例如如下例子：

<body>
    <div class="container">
        <p>
            <span class="text">Hello World</span>
            <span>Today</span>
        <p>
    </div>
</body>
/* .text {
    color: red;
} */

/* 选择器冲突导致的权重问题 */
.container .span.text {
    color: blue;
}

div p span:nth-child(1) {
    color: green;
}

计算方式

(a,b,c)

  • a: ID选择器的个数#（和）
  • b: 类.，伪类:和属性选择器[]的个数（和）
  • c：元素 和 伪元素::选择器的个数（和）

例如上面的例子：

/* (0,2,1) */
.container span.text {
    color: blue;
}
/* (0,1,3) */
div p span:nth-child(1) {
    color: green;
}

所以说，第一个选择器的权重更高，所以Hello World的颜色是蓝色。

如果算出来的a,b,c结果一样，那么就是谁在后面定义的谁生效（后来者居上）。

基础选择器则：

  • ID(1,0,0)
  • 类选择器(0,1,0)
  • 元素选择器(0,0,1)
  • 通配符选择器(0,0,0)

也有其他的表示方式:

选择器权重
!important∞
行内样式1000
ID选择器100
类选择器， 伪类，属性10
元素，伪元素1
通配符0
注意

你写11个类选择器，也不如一个ID选择器的权重高。