微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

给定以下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...

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

攻略指南

但更进一步解释，利用紫色的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规定也会笼罩这个粉色。

如果你感觉学到了新货色，随时能够点个赞，鼓掌或者留下评论✍️！

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。