Home / Questions / 122039
Accepted
Francisco Romero
Asked: 2020-12-03 07:39:09 +0800 CST 2020-12-03 07:39:09 +0800 CST

什么是 CSS 特异性以及它的用途是什么？

  • 772

我看到很多案例在尝试覆盖特定的 CSS 样式时都提到了 CSS 的特殊性。

CSS 的特殊性到底是什么，它的用途是什么？

css

1 Answers

  1. Best Answer

    特异性是指特定 CSS 样式与同时受多个 CSS 样式影响的页面元素的相关性。也就是说，它指的是一种风格相对于另一种风格的重要程度。

    我们赋予一种风格的特异性越大，这种风格最终被应用的可能性就越大。为此，CSS 规则遵循优先顺序。

    优先级顺序如下，从最不具体到最具体：

    • 标题选择器（例如：）p和伪元素（例如:before：）
    • 类选择器（例如：）.ejemplo、属性选择器（例如：[type="text"]和伪类（例如:focus：）
    • ID 选择器（例如#ejemplo：）

    然而，除了所有这些细节之外，如果我们使用内联样式，它们将覆盖外部 CSS 页面上的任何样式。可以说内联样式是最有特异性的，因此，我们永远不应该在我们的页面中使用内联样式。

    类上带有 ID 的样式示例

    #parrafo{
   color: green;
}

.parrafo{
   color: red;
}
    <p id="parrafo" class="parrafo">Esto es una prueba</p>

    正如我们所看到的，我们有两种引用段落的样式（ ID#parrafo和 class .parrafo），根据 CSS 用于应用样式的级联模型，应该应用 class，.parrafo因为它放在 CSS 文件中的最后... 但是，我们看到情况并非如此。

    这就是特异性发挥作用的地方，并且具有比类具有更高特异性的 ID，最终应用的是与 ID 对应的样式。

    ID 上的内联样式示例

    #parrafo{
   color: green;
}
    <p id="parrafo" style="color: red">Esto es una prueba</p>

    正如我们所看到的，该段落，即使它有一个绿色样式的 ID（具有更高特异性的元素），也没有应用，因为它也有内联样式，因此，后者被应用，因为它们具有更大的特异性。

    例外：使用 !important

    注意！！：使用声明!important被认为是一种不好的做法。我在下一点解释它。

    与元素样式关联的声明!important忽略应用于该元素的其余样式的特殊性，并应用用该声明标记的样式。

    参考第一个例子：

    #parrafo{
   color: green;
   font-size: 15px;
}

.parrafo{
   color: red !important;
   font-size: 3px;
}
    <p id="parrafo" class="parrafo">Esto es una prueba</p>

    基于此示例，并基于 CSS 特定性优先顺序，文本应为绿色，字体大小为 15px（由于 ID）。但是，我们看到生成的文本是红色的，字体大小为 15 像素。

    为什么会这样？因为即使红色包含在具有比 ID 更低的特异性的类中，声明也会!important忽略特异性的优先级顺序并将此样式设置为优先于其他样式的样式。

    为什么使用 !important 被认为是不好的做法？

    因为它完全违反了 CSS 规则，使得我们的 CSS 很难维护。

    例如，假设我们希望 div 中页面上的所有段落都是绿色的，除了两个段落分别为红色和紫色。

    可能的解决方案如下：

    .coloreados p{
  color: green;
}

#rojo{
  color: red;
}

#morado{
  color: purple;
}
    <div class="coloreados">
  <p>Este es de color verde</p>
  <p>Este es de color verde</p>
  <p id="morado">Este es de color morado</p>
  <p>Este es de color verde</p>
  <p id="rojo">Este es de color rojo</p>
</div>

    正如我们所看到的，div 内的所有段落.coloreados都受到影响，除了两个，我们已经为其分配了一个 ID，#morado并且#rojo由于它们具有更大的特异性而应用于所述段落。

    但是如果我们!important在类中使用该语句会发生什么.coloreados？

    .coloreados p{
  color: green !important;
}

#rojo{
  color: red;
}

#morado{
  color: purple;
}
    <div class="coloreados">
  <p>Este es de color verde</p>
  <p>Este es de color verde</p>
  <p id="morado">Este es de color morado</p>
  <p>Este es de color verde</p>
  <p id="rojo">Este es de color rojo</p>
</div>

    正如我们在上面的示例中看到的那样，ID 的样式#morado并#rojo没有被应用，即使它们比类具有更高的特异性。这是由于使用!important.

    上一个示例的结果是一个问题，因为我们只能用与!important每个 ID 关联的另一个样式来覆盖这些样式，这在应用 CSS 规则时限制了我们很多，这意味着维护起来要困难得多。。

    所以我不应该使用！important吗？

    不，有时（很少）除了使用声明之外别无选择，!important或者它在非常特殊的情况下会派上用场。在我看来，这些情况是：

    • 当有另一个声明!important适用于特定样式时
    • 在他们使用的第三方库中!important，因此不能以其他方式覆盖（除非我们直接修改库的样式）
    • 如果您想创建类来为页面特定类型的所有元素提供通用样式。例如：h1您页面上的所有内容都具有蓝色和某种字体。这样，您“确保”（除非有其他!important人覆盖它们）h1您的所有页面都将具有相同的样式。

    结论

    只要有可能，我们应该利用 CSS 的特殊性来应用我们的样式并尝试覆盖我们已经拥有的样式。

    我们不应该滥用，!important因为在维护和应用我们页面样式的 CSS 规则时需要更多的努力。

    • 16