Question

<div id="main-content">
  <div>
    <div>target me
         <div>don't target me</div>
    </div>
  </div>
  <div>
    <div>target me too
         <div>don't target me</div>
    </div>
  </div>
</div>

我试过这个：

#main-content div>div {

}

但这个ALSO的目标是说“不要瞄准我”，我希望不要针对这些div。

当然我们可以使用Id或类，但重点是为所有人声明一般规则。

请建议。

Answer 1

只需稍微优化选择器以强制执行层次结构：#main-content > div > div

http://jsfiddle.net/zXaLU/

作为一个注释，当使用结构选择器时，很好地引用非泛型标签。

示例：#main-content > NAV > UL比#main-content > DIV > DIV

更有意义

Answer 2

如果只希望样式应用于两个div的外部，则需要使用两个样式定义。第一个设置div目标的样式，第二个设置内部div不是目标：

#main-content div>div {
  /* set some styles */
}
#main-content div>div>div {
  /* reset the styles defined before */
}

通常，内部div（非目标）继承其父div的所有样式，因此为了使该效果无效，您必须再次显式重置所有这些样式。

修改

在所有评论之后：如果“定位”不包括通常的CSS继承，Tim Medora的答案更合适。我的回答也试图解释继承问题。

Answer 3

[dooes one]如何正确选择[指定的]元素？

“正确”的方式是给你想要选择一个表明其状态的类的项目：

<div id="main-content">
  <div>
    <div class="someclass">target me
         <div>don't target me</div>
    </div>
  </div>
  <div>
    <div class="someclass">target me too
         <div>don't target me</div>
    </div>
  </div>
</div>

...然后您只需使用class选择器：

.someclass {
    ...styles...
}

但是如果你无法修改标记，你仍然可以使用child selector链：

#main-content > div > div {
    ...styles...
}

如何正确选择这些元素？

3 个答案: