关于css权重那些事情

最新推荐文章于 2025-05-09 18:24:41 发布

B站大学酥糖

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量122

点赞数

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/qq_45907053/article/details/110111318

版权

自力更生的CSS 专栏收录该内容

2 篇文章

订阅专栏

css权重与计算

昨晚上老师讲css知识点，一直觉得这老师上课不好玩也没听他上课，然后他点名问我css啥啥啥样式怎么怎么样，我当时直接懵了

我上课没听课，当时还在看java书，况且您老人家啷个就突然间点我名，后来不是没回答上问题嘛，不好意思不听课了，结果老师有讲到css权重，直接一脸懵，当时想着回去自己在学习一下这个css权重，但是奈何游戏太香，打了两把游戏就瞌睡

罪过罪过，得出三条结论：

1、上课还是要好好听课，老师其实很优秀的啦

2、游戏很香，我觉得我再打下去肯定上青铜，实力杠杠的

3、学java的童鞋真的要秃头

（写这个主要让自己下次总结学习知识要点时候能想起我今天的忏悔）

言归正传还是看权重

多条样式定义规则对同一个元素进行样式设置的时候，这时候不能按照css选择器的优先级来判断，用权重

权重它规定了css定义样式的优先级次序；

而优先级顺序根据 css选择器的权重值的比较来确定的，权重值可以看这个表格和例子

知识点

标签选择器	权重等级
继承或者*	0，0，0，0
每个元素（标签选择器）	0，0，0，1
每个类，伪类(class\|伪类\|属性选择器)	0，0，1，0
每个ID	0，1，0，0
每个行内样式style=""	1，0，0，0
每个!important	无穷大

这里的四个数（0，1）我们只是为了方便识辨权重等级在个位，十位，百位，千位才这样子写的，不要误解，所以在这里数位之间没有进制，级别之间不可超越（四个数单纯看作是个位，十位，百位，千位）

1、值从左到右，左边最大，一级大于一级

2、数位之间没有进制，比如 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是 0,0,1,0 所以不存在10个div能赶上一个类选择器

3、继承的权重是0

4、通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0

例子

<head>
    <style>

/*0,0,1,2
div p都是标签选择器,所以在个位上是2  因为.two是类，所以是1*/
       div.two p{
           color: purple;
          
       }

/*0,0,1,1*/
        .one p{
            color: green;
        }

/*0,0,0,2  div p都是标签选择器，有两个标签选择器，所以是2*/
        div p{
            color: red;
        }

/*0,1,0,0*/
        #four{
            color: yellow;
        }
    </style>

    </style>
</head>


<body>
    <div class="one">
        <div class="two">
            <p>two的内容</p>
        </div>
        <p>one的内容</p>
    </div>
</body>