《掌握CSS三大特性，轻松解决CSS代码失效难题》

在逃小屁王

已于 2024-12-17 17:39:00 修改

阅读量678

点赞数 14

文章标签： css 前端

于 2024-10-22 17:07:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56473118/article/details/143142515

版权

CSS三大特性

前言

在前端学习中，CSS三大特性是必学且很重要的知识点，其中三大特性分别是：层叠性、继承性和优先级。

三大特性亦是一种‘规则’，精通并‘遵守’是帮助你彻底解决CSS代码失效问题的关键！

测一测

先测一测自己是否掌握了这个知识点：

.red {
color: red;
}
.blue {
color: blue;
}
<div class="red blue">123</div>
<div class="blue red">123</div>

问：这两个div内的文字是什么颜色？

CSS三大特性的学习

每个特性先学习再做题！

层叠性

层叠性是指，当一个标签前后被设置了相同样式时，标签会根据就近原则继承离自己最近的样式

注意，只有相同样式会被覆盖继承，除此之外其它样式均会被叠加继承

下面代码中span标签内的文字是什么颜色的？
<body>
    <style>
        span {
            font-size:30px;
            color: red;
        }

        span {
            color: green;
        }
    </style>
    <span>我是什么颜色？</span>
</body>

上文示例样式根据层叠性可得：相同样式color会根据就近原则继承绿色，而除此之外，字体大小也会被叠加继承。

继承性

继承性是指，子级元素可以继承父级元素的文本和字体样式、

注意标粗字体，继承性不是所有属性都可以被继承的

小li标签是否会变色加粗？
<body>
    <style>
        .nav{
            color: red;
            font-weight:600px;
        }
    </style>
    <ul class="nav">
        <li>你</li>
        <li>好</li>
        <li>呀</li>
    </ul>
</body>

毫无疑问，小li标签会继承父级元素文本和字体样式，变红加粗

优先级

选择器之间是有优先级的，各选择器的权重如下（从低到高）：

继承或 *——0000
元素选择器——0001
类/伪类选择器——0010
id选择器——0100
行内样式style——1000
！important——无穷大

相同样式下，标签会选择权重高的继承

权重码由四位数字构成，需从左到右依次进行比较，先大则大

下面代码中span标签内的文字是什么颜色的？
<body>
    <style>
        .test {
            color: red;
        }

        span {
            color: green;
        }
    </style>
    <span class="test">我是什么颜色？</span>
</body>

很明显，类选择器权重大于元素选择器，所以文字会是红色

趁热打铁，再来一个题：

小li标签文字是什么颜色？
<body>
    <style>
        .nav {
            color: red;
        }

        li {
            color: green;
        }
    </style>
    <ul class="nav">
        <li>你</li>
        <li>好</li>
        <li>呀</li>
    </ul>
</body>

如果你的答案是红色，那么恭喜你答错了！

这里要特别注意！注意！再注意！nav类虽然是类选择器，但是它是继承类，而上文已经说明继承的权重是最小的，所以答案应该是绿色。

★复合选择器的权重

第一个小li标签是什么颜色？
<body>
    <style>
        .nav li {
            color: red;
        }

        .nav .green {
            color: green;
            font-weight: 600;
        }
    </style>
    <ul class="nav">
        <li class="green">你</li>
        <li>好</li>
        <li>呀</li>
    </ul>
</body>

以上示例中第一个小li标签是绿色加粗的，这是因为复合选择器的权重是可以叠加的。叠加过程如下：