CSS：选择器优先级的特性重点

最新推荐文章于 2024-08-24 13:47:49 发布

Xixi️Jjiao

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量167

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Xixicjj/article/details/121887887

版权

首先我们来看一张表格

选择器	选择器权重
继承父类选择器或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器或链接伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style	1，0，0，0
!important	极为重要

需要注意的有两点：

1.子类继承父类得到的选择器继承权重为0，0，0，0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        /* 父类的权重是100 */
        #father {
            color: pink !important;
        }

        /* 但子类继承父类选择器得到的权重永远是0，所以文字会显示orange颜色 就算在pink后加！important也是一样*/
        p {
            color: orange;
        }

    </style>
</head>

<body>
    <div id="father">
        <p>从此艳遇落金城，一人撑伞两人行</p>
    </div>

</body>

</html>

2.权重之间的相加比较

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重</title>
    <style>
        /* 权重：0，0，0，1 */
        li {
            color: pink;
        }

        /* 权重：0，0，0，1 + 0，0，0，1 = 0，0，1，0 */
        ul li {
            color: orange;
        }

        /* 权重：0，0，1，0 + 0，0，0，1 = 0，0，1，1 */
        .father li {
            color: red;
        }
    </style>
</head>

<body>
    <ul class="father">
        <li>我是谁</li>
        <li>我在哪</li>
        <li>我要干什么</li>
    </ul>
</body>

</html>

Xixi️Jjiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：选择器优先级的特性重点

首先我们来看一张表格选择器选择器权重继承父类选择器或者 * 0，0，0，0 元素选择器 0，0，0，1 类选择器或链接伪类选择器 0，0，1，0 ID选择器 0，1，0，0 行内样式style 1，0，0，0 !important 极为重要需要注意的有两点：1.子类继承父类得到的选择器继承权重为0，0，0，0<!DOCTYPE html><html lang="en">&..
复制链接

扫一扫