有没有办法强制降低 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>

与

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

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

有没有办法在不使用的情况下强制获得特异性产量!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是分配的最低内部特异性等。

或者我只是被迫到处使用类？

Answer 1

MDN 有一个有趣的提示可以帮助您在不使用的情况下摆脱困境！重要提示：使用选择器两次：

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

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

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

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

footer a {
  color: blue;
}

进一步注意，根据一种称为 BEM（块、元素、修饰符）的方法，使用类（任何元素一个类）可能不是最糟糕的选择。

Answer 2

有没有办法在不使用 !important 的情况下强制获得特异性产量？...或者@specify('[data-role="a"] > :last-of-type' , 10) { ... }其中 10 是分配的最低内部特异性

不，那里没有。

不确定您还想从答案中寻找什么，因为您似乎了解特异性一般是如何工作的——仅使用您提供的小型 HTML，您就可以通过至少数十种方式编写涉及元素、类、属性等的规则。以获得您想要的造型。不过，如果您正在寻找一篇简单、写得好的关于特异性的文章，我总是发现这篇文章是最有用的：