Question

我希望匹配第一代分裂元素（所有这些）但不是任何一个孩子。因此，如果我使用选择器应用边框1（如下视觉上）将获得容器，但是2（视觉上如下）将无法获得容器。我该如何构建那个选择器？

<div id="container">
<div>1<div>2</div></div>
<div>1<div>2</div></div>
<div>1<div>2</div></div>
</div>

Answer 1

#container > div {
   border: 1px solid #f0f;
}

Answer 2

最好的方法是使用即时child selector（>）：

#container > div {
  border: 1px solid red;
}

（IE6不支持此功能）

Answer 3

选择器是：

div#container > div

或只是

#container > div

我非常喜欢SelectORacle来帮助理解CSS选择器。更多关于Eric Meyer的Child Selectors。

Microsoft Internet Explorer 6更新

如果对>的支持是一个问题，就像在MSIE6的情况下那样，我用来处理它的传统方式是为第一代设置样式，然后为每个其他后代生成取消设置。所以，像这样：

#container div { border: 1px solid #000; }
#container div div { border: none; }
#container div div div { border: none; }
#container div div div div { border: none; }

你可以根据需要做很多代。在上面我允许3个级别的嵌套（足够？）它不漂亮，但它是可靠的。

Answer 4

由于某个浏览器（IE6）不支持child selector >，因此您可以使用descendent selectors向第一个后代添加边框，并将其从后代的后代中删除。

HTML

<div id="container">
    <div>1
       <div>2</div>
    </div>
    <div>1
        <div>2</div>
    </div>
    <div>1
        <div>2</div>
    </div>
</div>

CSS

#container div {
    border:1px dashed grey;
}

#container div div {
    border:none;
}

如果IE6是一个浏览器，你需要支持那么>选择器已经回答是最简单的方式来为孩子设置样式。

CSS第一个GENERATION div但不是第二个选择器

4 个答案:

HTML

CSS