css - 如何正确选择这些元素？

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 {

}

但这也针对 div 说“不要针对我”我不想针对那些 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 继承，蒂姆梅多拉的答案更合适。我的回答也试图解释继承。

Answer 3

[dooes one] 如何正确选择 [the specified] 元素？

“正确”的方法是为您要选择的项目提供一个指示其状态的类：

<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...
}

但是如果您无法修改标记，您仍然可以使用子选择器链：

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