有没有一种方法可以强制CSS降低特异性？

Question

我有一个CSS模板，我想在一些HTML标记中使用尽可能少的属性，同时允许稍后通过类（而不是ID）轻松自定义该标记。

<ul data-role = 'a'>
  <li>A</li>
  <li>B</li>
</ul>

<style>
  [data-role="a"] { /* ... */ }
  [data-role="a"] > :first-of-type { /* ... */ }
  [data-role="a"] > :last-of-type { /* ... */ }
</style>

问题在于由于CSS特异性，我要么不得不把所有选择器都变成类，要么强制任何对我的内容进行样式表修改的操作变得非常具体和明确。

<style>
[data-role="a"] > li { } /* custom overriding CSS */
</style>

vs

<ul class = 'a'>
  <li class = 'a-top'>A</li>
  <li class = 'a-bottom'>B</li>
</ul>

<style>
  a {/* */}
  a-top {/* */}
  a-bottom {/* */}
</style>

有没有一种方法可以强制 specificity 产生作用，而无需使用 !important ，例如假设情况下：

@yield to classes {
  [data-role = "a"] { } 
  [data-role = "a"] > :first-of-type { }
  [data-role = "a"] > :last-of-type { }
  /* etc */
}

或

@specify('[data-role="a"] > :last-of-type' , 10) { ... } 其中10是分配的最低内部特定性等级，等等。

还是说我被迫在所有地方使用类？

- Kithraya

---

不幸的是，强制在各处使用类是许多CSS框架的前提条件。如果您想避免这一切，您需要一个更具体的选择器。您不需要ID，但确实需要多一个伪类。 - BoltClock

我很难想象你所说的问题。你想让后面的 > li 覆盖前面的 > :first-of-type 吗？那么你可以直接写 > li:nth-child(n)。 - Mr Lister

简而言之，是的（它已经可以），但我想使用一个类来代替一些非常特定的“属性>元素”选择器。我知道如何通过常规方式增加特异性。 - Kithraya

Answer 1

MDN有一个有趣的技巧可以在不使用!important的情况下帮助您解决问题： 使用选择器两次：

#myId#myId span { color: yellow; }
.myClass.myClass span { color: orange; }

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

最近，主流浏览器开始支持 :where() 伪类，它可以更好地管理特异性。其中的选择器不会对整个选择器的特异性产生影响：

:where(aside.where, footer.where) a {
  color: orange;
}

footer a {
  color: blue;
}

<aside class="where">
  <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
</aside>

<footer class="where">
  <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
</footer>

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

需要注意的是，根据 一种名为BEM（块、元素、修饰符）的方法论，使用类（每个元素一个类）可能并不是最糟糕的选择。

- Simon

---

:where() 正是我一直在寻找的东西。它将其中的所有内容都归零特异性。这使得它非常适合覆盖浏览器默认样式或逐渐降低特异性至所需水平。 - sepphuber3

Answer 2

有没有一种方法可以强制执行特定性产生，而不使用!important？或者@specify（'[data-role="a"] > :last-of-type'，10）{...}其中10是分配的最低内部特定性。 不，没有。您似乎已经了解了特定性如何在一般情况下工作，所以我不确定您还在寻找什么其他答案-只提供了您提供的少量HTML，就有至少数十种方式可以编写涉及元素，类，属性等规则来获取所需的样式。但是，如果您正在寻找简单，书写良好的特定性说明，我始终认为这个最有用：https://css-tricks.com/specifics-on-css-specificity/（自2010年以来不断更新！）

- skyline3000