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

Question

如果＃div2包含在＃div1中，那么在css样式表中引用它是否有任何实际优势？像这样：

#div1 {
  display:block; 
}

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

然后同样。我有一个表ID，然后是表标题

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

Answer 1

唯一的好处是你可以更具体，例如创建一个适用于某个元素的规则，只要它放在另一个元素中。但在大多数情况下，没有理由这样做，它可能会损害你的css的性能（如果你想改变父ID，它会造成代码重复）。

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

阅读this article以获得更深入的解释。

Answer 2

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

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

Answer 3

一般来说，它对嵌套id选择器没有用，但是存在细微差别，在下面，嵌套规则具有更高的特异性，背景将是红色

HTML

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

CSS

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

#inner {
    background-color: blue;
}

specificity的规则在css规范中列出。

话虽这么说，类通常是要走的路，但这可以用于根据容器更改元素的样式（如果由于某些奇怪的原因你不能使用类）