了解 CSS 特异性：样式规则重要性指南

CSS 爱好者们好！

介绍 ？

有没有想过为什么您的 CSS 样式有时无法按预期应用？您即将揭开 CSS 最神秘的概念之一：特异性。将其视为一场国际象棋游戏，您选择的每个选择器都是可能改变网页外观结果的一步棋。

以下是您将在本文中学到的内容：

• 理解特异性：它是什么以及为什么它对 CSS 样式至关重要。

• 特异性是如何计算的：打破选择器的评分系统。

• 实际示例：特殊性发挥作用的真实场景。

• 高级特异性情况：处理嵌套选择器和伪元素。

• 管理特异性：保持 CSS 整洁和布局可预测的提示。

最终，您将成为 CSS 规则的大师。

什么是 CSS 特异性？ ？

特异性是根据 CSS 声明使用的选择器赋予 CSS 声明的权重。当 CSS 规则发生冲突时，它决定了应用哪些样式。将其视为一个评分系统，其中每种选择器类型都会贡献分数，得分最高的规则获胜。

特异性的层次结构？

特异性的计算方式如下：

1. 内联样式 ：这些样式通过 style 属性直接应用于元素。它们是最具体的，得分 1,0,0,0.

2. ID ：ID 选择器将 0,1,0,0 添加到分数中。它们非常具体，但不如内联样式具体。

3. 类、属性和伪类：其中每一个都会将 0,0,1,0 添加到特异性分数中。这包括 .classname、[attribute]、:hover 等。

4. 元素和伪元素：这些是最不具体的，添加0,0,0,1。例如 div、p、::before 等

具体行动示例??

内联样式主导

<div>





<pre class="brush:php;toolbar:false">div {
    color: blue;
}

结果：文本将是红色。内联样式胜过所有其他选择器。

ID 重写类

<div>





<pre class="brush:php;toolbar:false">#unique {
    color: red;
}
.common {
    color: blue;
}

结果：文本将是红色。 ID 选择器比类具有更高的特异性。

多类与单类

<div>





<pre class="brush:php;toolbar:false">div {
    color: blue;
}

结果：文本将为绿色。组合选择器可以提高特异性。

实践中的具体性？

• 组合选择器 ：您可以组合选择器以提高特异性。例如，div#id.class 比 #id 或 .class 更具体。

• 顺序的重要性：当特异性相同时，最后定义的规则获胜。这称为级联。

• !important ：作为最后的手段，!important 可以覆盖特异性，但最好谨慎使用它，因为它可能会导致维护问题。

高级特殊情况？

嵌套选择器

<div>





<pre class="brush:php;toolbar:false">#unique {
    color: red;
}
.common {
    color: blue;
}

结果：文本将为紫色。由于选择器链，嵌套选择器更加具体。

伪类和属性

<div>





<pre class="brush:php;toolbar:false">.red {
    color: red;
}
.red.blue {
    color: green;
}

<div>





<pre class="brush:php;toolbar:false">#container .text {
    color: purple;
}
p.text {
    color: green;
}

结果：输入将具有黄色背景，因为属性选择器被视为与类具有相同的特异性级别。

管理特异性的技巧？

• 使用类：类比样式 ID 更易于维护。

• 避免过度特异性：不要过度使用 ID 选择器进行样式设置。它们会使您的 CSS 在需要时难以覆盖。

• 理解继承：某些属性是继承的，这可能会影响嵌套元素中特异性的工作方式。

• 利用特异性来发挥优势：知道何时增加重要样式的特异性，但保持 CSS 结构干净。

结论

CSS 特异性决定了发生冲突时将应用哪些样式。通过理解和掌握特殊性，您可以制作完全按照您的预期运行的 CSS，从而创建高效且可管理的样式表。请记住，特殊性不仅仅意味着遵守规则；还意味着明确规则。这是关于具有远见和灵活性的设计。

祝您编码愉快，祝您的 CSS 始终如您所需要的那样具体！ ？

---

？您好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

？如果您喜欢这篇文章，请考虑分享。

？ 所有链接 | X | 领英

以上是了解 CSS 特异性：样式规则重要性指南的详细内容。更多信息请关注PHP中文网其他相关文章！