嵌套CSS选择器而不增加特异性

让我们来看看这三个选择器,从最高特异性到最低特异性:

.special-section p { }
.weird-font        { }
p                  { }

许多CSS专家建议不要像第一个选择器那样嵌套.special-section p,因为它的特异性足够高,你不能用简单的类来覆盖它.weird-font.我想找到一种方法来继续实现嵌套.special-section p,但没有增加特异性.像这样的东西:

 .weird-font { }
 .special-section p /* with hack to decrease specificity */ { }
 p { }

使用案例:

使用像这样的简单选择器来应用排版和文档范围的默认值是相当安全的p.但是,我想更改特定部分的默认值,类似于.special-section p,而不必使用hacks来增加选择器的特性.weird-font.我宁愿使用hack来降低特异性,而.special-section p不是使用hack来增加特异性.weird-font.有没有办法做到这一点？

您不能降低特异性,但可以为异常添加更具体的选择器.

.weird-font, /* Normal weird font */
.special-section p.weird-font /* Override for special section */ 
  { }

但正如你所看到的,它是一个滑动的尺度.那些大师们可能是对的.如果你想删除.special-section p,而是给那些P自己的选择器.special-section-para或什么,那么你就不会有这个问题.

但就个人而言,我不介意不得不像上面那样添加一个例外.我认为整个特定的东西就是出于那个目的,如果你需要一个更具体的选择器来设计一些东西,对我来说这似乎是正确的事情.

一个常见的解决方案是使用!important.!important的问题在于只有一个覆盖级别.如果您创建一个更具体的选择器,您可以使用更加特定的选择器再次覆盖它.在使用!important之后,你就没有选择了.更重要的是,使用!important可能会干扰用户可能具有的特殊样式表以提高可读性.因此我从不!important在这样的情况下使用.

但话说回来,我不认为自己是CSS大师.;)

作为CSS大师,我哀叹抛出Selectors必须提供的所有内容以避免特殊性问题.这并不是说我不相信特异性机制是有缺陷的,但肯定没有那么戏剧性的解决方法.

首先:不,你不能降低选择器的特异性.选择子不提供任何具有负特异性水平的特征,这些特征水平会以这种方式降低特异性.你可以去的最低点*,它具有零特异性(即它不会使复杂的选择器具体或多或少).

因此,你对选择器级别的唯一追索是增加它.是否可以在不使用黑客的情况下执行此操作取决于您对"hack"的定义.

以下是我认为是hack的内容,因为它使用了一个语法上合法但语义无意义的选择器,就像:not(_)没有明显的目的一样,只是为一个复杂的选择器添加一个类型选择器的特异性(这对于外行):

.special-section p { }
.weird-font, :not(_).weird-font { }

以下不是我认为的黑客攻击,因为无论如何你都会做正常的事情.几乎唯一的"问题"是,它是单个类选择器的明显重复:

.special-section p { }
.weird-font, .special-section p.weird-font { }

如果你为了提高特异性而考虑任何类型的无关选择器 - 黑客 - 这是一个完全合理的POV,毫无疑问 - 那么下一个不是黑客的最好的事情就是!important.

就个人而言,我会选择一个特异性黑客.!important有一个重要的反响,没有特异性黑客 - 请记住,!important特异性具有不同的语义.例如,您不能!important使用内联样式或JavaScript 覆盖声明,除非它们也标记为重要.¹

¹ _{事实上,这是我对Lea Verou的反应,当时她在Twitter上讨论了特异性黑客攻击!important.}