共计 1391 个字符，预计需要花费 4 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。