如何在不依赖父选择器或使用 !important 的情况下添加 CSS 特异性？

Question

blue 应该是蓝色的，不向元素添加 id，不使用 JavaScript 并且不知道父级 #id，因为它们可以在将来更改，同时允许 JavaScript 设置正确应用的样式属性。

custom-tag {
  color: blue; 
  /* 
   * the above should have the specificity of exactly 2×ids + 1×tag
   */
}


/*  later loaded CSS, which is not controllable... */

#one custom-tag, #two custom-tag {
  color: red;
}

<div id="one">
  <custom-tag>blue</custom-tag>
  <custom-tag style="color:orange">orange</custom-tag>
</div>

<div id="two">
  <custom-tag style="color:green">green</custom-tag>
  <custom-tag>blue</custom-tag>
</div>

Answer 1

无需 parents 即可提高选择器的特异性，使用 :not() + non-existing 所需特异性的选择器：

any-tag:not(#bogus_id):not(#bogus_id) {
  color: blue; 
}

#one any-tag, #two any-tag  {
  color: red;
}

<div id="one">
  <any-tag>blue</any-tag>
  <any-tag style="color:orange">orange</any-tag>
</div>

<div id="two">
  <any-tag style="color:green">green</any-tag>
  <any-tag>blue</any-tag>
</div>

Answer 2

您也可以像这样堆叠选择器：

.selector.selector

这将增加特异性。

你也可以叠放两次以上。

适用于所有浏览器。

如何在不依赖父选择器或使用 !important 的情况下添加 CSS 特异性？

How to add CSS specificity without relying on parent selectors or using !important?

css

css-specificity