大多数开发人员无法通过这个简单的CSS面试问题(CSS特异性)

开发 前端
由于这个CSS规则是针对父元素而不是实际的​​p​​ 标签本身,它会被其他更具体的CSS规则覆盖。是的,应用绿色的CSS规则也会覆盖这个粉色。

终于上线啦,有好多好玩的模型,包括最近很火的瞬息宇宙

给定以下HTML和CSS代码,你知道 test文本的颜色会是什么吗?

<body>
    <div class="hello">
        <p class="abc">test</p>
    </div>
</body>
p.abc {
    color: purple;
}
.hello p {
    color: red;
}
.abc {
    color: blue;
}
p {
    color: green;
}

花点时间仔细思考一下

如果你猜测的颜色是红色,那么你是正确的!你也对CSS特异性有着扎实的理解。

事例地址:https://codepen.io/ambroseliew/pen/jOpzXpj

为什么?

如果你没有找到正确答案或者不明白为什么文本颜色是红色的,你可以查看这篇其他文章,在这里我详细讲解了CSS的特异性。

https://medium.com/@ambroseliew1998/stop-writing-important-in-your-css-code-and-do-this-instead-62171f86016f

理解这个概念很重要,因为如果你是一个网页开发者,尤其是前端开发者,这样的概念经常被使用。

攻略指南

但更进一步解释,应用紫色的CSS特异性和应用红色的另一条规则,它们的特异性都是0-0-0-1-1。这是因为它们都有1个类选择器和1个类型选择器。

同时,对于应用蓝色的规则,其CSS特异性为0-0-0-1-0,因为它只有一个类选择器。而应用绿色的规则的CSS特异性为0-0-0-0-1,因为它只有一个类型选择器。

因此,具有最高CSS特异性值的规则是应用紫色的规则和应用红色的其他规则。

但是有两个具有相同CSS特异性值的CSS规则!我们如何知道应该应用哪个?

这就是“层叠”在层叠样式表(CSS)中发挥作用的地方。这意味着最后应用的规则(即位于底部的规则)将被应用。在这种情况下,将应用应用红色的规则。

我们甚至可以进一步添加另一个CSS规则到列表中。

.hello.hello {
    color: pink;
}

是的,你可以堆叠类选择器(和ID选择器)来增加特异性。因此,这条规则的CSS特异性将为0-0-0-2-0。这个值肯定比迄今为止的所有其他规则都要高。

然而,如果你将这个CSS规则添加到目前在codepen中已有的CSS代码中,你会发现文本的颜色仍然是红色!为什么会这样呢?

这是因为直接针对元素的规则总是优先于针对父元素的规则(也称为继承样式)。

因此,在这种情况下,由于这个CSS规则是针对父元素而不是实际的p 标签本身,它会被其他更具体的CSS规则覆盖。是的,应用绿色的CSS规则也会覆盖这个粉色。

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2023-01-31 10:22:00

HiveMapReduce文件合并

2023-02-27 15:44:17

Java开发技巧

2023-01-17 16:25:18

前端开发JSON

2023-08-30 08:01:37

前端CSS

2012-11-27 10:23:18

CSSWeb开发

2023-02-26 01:47:13

2020-05-07 10:40:37

Web工具CSS

2015-06-26 09:34:29

CSS开发框架及工具

2020-07-05 08:01:44

SOC威胁检测漏洞

2024-06-04 14:31:16

2022-03-05 23:09:52

开发软件工程师前端

2024-05-07 13:29:00

CSS选择器权重

2009-12-25 10:11:22

.NET Framew

2019-10-09 10:06:22

网络大数据物联网

2009-07-14 15:39:34

Swing大多数控件

2022-06-21 10:34:56

芯片短缺供应链问题

2016-03-09 12:11:33

Web开发人员简单步骤

2024-05-30 09:43:00

2013-04-02 10:04:17

iCloud苹果

2022-05-09 07:40:16

WebCSS前端
点赞
收藏

51CTO技术栈公众号