CSS 特异性最佳实践 : + selector vs class vs rule overwriting

Question

我有一段这样的 HTML 代码:

<div id="a">
  <p>A piece of HTML</p>
<div>

根据某些情况，它会以不同的方式放置在页面中，因此我需要给它不同的样式。

可以这样放置

案例一

<div id="container">
  <div id="b">
    <div id="a"></div> 
  </div>     
<div>

或

案例二

<div id="container">
  <div id="b"></div>
  <div id="a"></div>
<div>

我想知道什么是识别这两种不同情况并使用 CSS 规则以不同方式设置 #a div 样式的更好方法(如果存在并同时考虑最佳实践和性能) .

我是否应该为每种情况分配两个不同的类，然后检测添加一些这样的 CSS 规则:

#a.class-for-case-1{
  /* Rules here */
}

#a.class-for-case-2{
  /* Rules here */
}

或者使用像 + 选择器这样的特异性选择器:

#b #a{
  /* Rules here */
}

#b + #a{
  /* Rules here */
}

或者甚至为应该从 + 选择器覆盖的 #a div 使用默认样式？

#a{
  /* Default rules here */
}

#b + #a{
  /* Specific rules here */
}

如有类似问题没注意到，先谢谢大家了。

Answer 1

最快的选择(我认为)

我还没有测试过，这只是基于我对工作原理的理解。假设只有这两种情况，您应该这样做:

#a {
  /* Default rules here */
}

#b #a {
  /* Override rules here */
}

唯一的默认 #a id 选择器大约是目前最快的选择器，因为该元素在页面上应该是唯一的，并且应用规则只需要一次检查。所以用它设置一个默认样式。

覆盖规则将几乎一样快，因为浏览器将遇到 #b 的唯一 ID，从 #a 再次检查 DOM 树，并且应用这些规则(如果它显然是 #b 的 child )。当然，we are talking minor differences in efficiency here .

请注意，通过这些选择器应用于 #a 的任何样式都将具有相当高的特异性(尤其是嵌套版本)，因此不能被任何 .someClass 覆盖 css 你或者javacript 可以尝试申请。但这可能完全没问题，具体取决于您的情况。正是这种高度特异性使得稍后在这些元素上更改 css 导致一些人完全避免使用 id 来应用 css 属性，但我觉得这完全取决于网站的上下文，无论是好事还是坏事为此使用 id。