考考你CSS的选择器权重

菜园前端
• 阅读 215

原文链接:https://note.noxussj.top/?source=helloworld


选择器权重

选择器权重划分代表有多个选择器同时选中同一个元素时,应该以谁的为准,这里就会涉及到权重的问题。

现实生活举例 假设你的好朋友小明和路人小红同时掉水里,你先救谁?那你可能会先救小明,因为小明的优先级/权重比较高。

基础案例

在同一层级下

同一层级代表通过单个选择器直接选中某个元素。

以下案例存在类选择器和 id 选择器,两个选择器同时都选中了 “小明” 这个 div 并且都设置了字体颜色。

<!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>Document</title>
        <style>
            .person {
                color: green;
            }
            #xiaoming {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="person" id="xiaoming">小明</div>
    </body>
</html>

最终结果是显示了红色的 "小明",id 选择器优先级相对较高。

在演练场中尝试一下

其他的权重不需要特意记住,只需要知道以下前四个优先级即可。

!important > 内联样式 > ID 选择器 > 类选择器 > (标签选择器、伪类选择器、属性选择器...)

不同层级下

不同层级指后代、子代选择器的优先级问题,层级越深优先级越高。

<!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>Document</title>
        <style>
            .box2 {
                color: green;
            }
            .box1 .box2 {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">小明</div>
        </div>
    </body>
</html>

最终结果是显示了红色的 "小明",因为 .box1 .box2 是两层,而 .box1 是一层。

在演练场中尝试一下

点赞
收藏
评论区
推荐文章
菜园前端 菜园前端
1年前
常用CSS的选择器有哪些?
原文链接:选择器定义css选择器代表如何选中某个元素现实生活举例我们可以想象一个元素,其实就是一个人,那我该如何找到这个人呢?例如可以通过id选择器的方式,就像是通过身份证号码找到TA。也可以通过标签选择器找到TA,就像是通过喊TA的名字的方式。类选择器c
Stella981 Stella981
2年前
Spring Cloud Gateway中的权重路由
摘要:本文主要通过运用SpringCloudGateway的WeightRoutePredicateFactory对URL进行权重路由。1.权重路由1.1权重路由使用场景在开发或者测试的时候,或者线上发布,线上服务多版本控制的时候,需要对服务提供权重路由,最常见的使用就是,一个服务有两个版本,旧版本V1,新版本
Stella981 Stella981
2年前
Less 嵌套
本节我们学习Less中的嵌套,嵌套应该很容易理解,HTML语言中就支持标签的嵌套。我们在使用CSS时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:.xkd{fontsize:14px;}.xkdp{lineheight:25
Wesley13 Wesley13
2年前
MySQL 权重搜索
SQL匹配\_和%SQL的模式匹配允许你使用“_”匹配任何单个字符,而“%”匹配任意数目字符(包括零个字符)。在MySQL中,SQL的模式缺省是忽略大小写的。注意在你使用SQL模式时,你不能使用或!;而使用LIKE或NOTLIKE比较操作符。语法:SELECT字段FROM表WHERE某字段Lik
Wesley13 Wesley13
2年前
CSS基本语法及页面引用
css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
MXNET:权重衰减
构建数据集coding:utf8frommxnetimportinitfrommxnetimportndarrayasndfrommxnet.gluonimportlossasglossimportgbn_train2
Wesley13 Wesley13
2年前
020_CSS3
目录如何学习CSS什么是CSS发展史快速入门css的优势三种CSS导入方式拓展:外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要
Stella981 Stella981
2年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
2年前
CSS前端经典面试题及解析——小白入门必备
1.CSS选择器的优先级是如何计算的?浏览器通过优先级规则,判断元素展示哪些样式。优先级通过4个维度指标确定,我们假定以a、b、c、d命名,分别代表以下含义:1.a表示是否使用内联样式(inlinestyle)。如果使用,a为1,否则为0。2.b表示ID选择器的数量。3.c表示类选择器、属性