css - 使用嵌套选择器有什么真正的优势吗？

Question

如果#div2 包含在#div1 中，那么在css 样式表中引用它有什么真正的优势吗？像这样：

#div1 {
  display:block; 
}

#div1 #div2 {
 background-color:#e0e0e0;
}

然后类似地。我有一个表 ID，然后是表头

#myTable {
    width:100%;
}
#myTable #productName{
   width:75%;
}

score 2 · Accepted Answer

唯一的好处是您可以更具体，例如创建一个规则，该规则仅适用于某些元素，前提是它放置在另一个元素中。但在大多数情况下，没有理由这样做，并且可能会损害您的 css 的性能（加上它会创建代码重复，以防您想更改父 ID）。

在您的情况下，选择器是 ID，并且由于每个 ID 只能有一个元素，因此嵌套选择器的优势甚至更少，并且您可能不需要它们。

阅读这篇文章以获得更深入的解释。

score 1 · Accepted Answer

由于元素 ID 在 DOM 中是唯一的，因此所选上下文在给定示例中是明确的，并且没有任何优势。

但是，当您使用类时，嵌套选择器变得非常有用。

score 1 · Accepted Answer

一般嵌套id选择器没用，但是有细微的差别，下面嵌套规则有更高的特异性，背景会是红色的

HTML

<div id="outer">
    <div id="inner">foo</div>
</div>

CSS

#outer #inner {
    background-color: red;
}

#inner {
    background-color: blue;
}

特异性规则在 css 规范中进行了概述。

话虽这么说，类通常是要走的路，但这对于根据容器更改元素的样式很有用（如果出于某种奇怪的原因你不能/不会使用类）

3 回答 3