(1)CSS层叠性

层叠性指多种CSS样式的叠加。这是浏览器处理冲突的一个能力。

当出现样式冲突，会按照CSS书写的顺序，以最后的样式为准：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            color: skyblue;
            font-style: 30px;
        }

        div {
            color: hotpink;
        }
    </style>
</head>

<body>
    <div>月读当空照,斑爷对我笑。</div>
</body>

</html>

(2)CSS继承性

继承性是指在写CSS样式表时，子标签会继承父标签的某些样式。

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,一级color属性)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            color: pink;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <p>胜利女神在微笑</p>
    </div>
</body>

</html>

(3)CSS优先级/CSS特殊性(specificity)

CSS优先级是为了解决CSS层叠性的一些问题。
使用CSS specificity计算CSS权重：

  • 继承/*贡献值------0.0.0.0;
  • 标签贡献值------0,0,0,1;
  • 类/伪类贡献值------0.0.1,0;
  • ID贡献值-----0,1,0,0;
  • 行内样式贡献值------1,0,0,0;
  • !important贡献值------∞无穷大
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* 最大的 div { color: orange !important; } */

        /* id选择器 0,0,1,0 */
        #ning {
            color: red;
        }

        /* 类选择器 0,0,1,0 */
        .king {
            color: blue;
        }

        /* 伪类选择器 0,0,1,0 */
        :first-child {
            color: green;
        }

        /* 标签选择器 0,0,0,1 */
        div {

            color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p class="king" id="ning" style="color:skyblue">得来失 聚了散 千万莫求全</p>
    </div>
</body>

</html>


权重叠加的例子:
div ul li ------ 0,0,0,2;
.nav ul li ------ 0,0,1,2;
a:hover ------ 0,0,1,1;
.nav a ------ 0,0,1,1;
#nav p ------ 0,1,0,1;
同一类选择器遵循就近原则
优先级总结:
权重是优先级的算法,层叠是优先级的表现。