是否有第一个直接孩子的CSSselect器？

我有以下的HTML

<div class="section"> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub contents 2</div> </div> </div> 

以下风格：

 DIV.section DIV:first-child { ... } 

出于某种原因，我不明白的风格是适用于“子内容1” <div>以及“标题” <div> 。

我认为风格的select器只适用于一个名为“部分”的类的第一个直接孩子。 我怎样才能改变select器得到我想要的？

Answer 1

你发布的字面意思是“finddiv div内部的任何div，并且是他们父母的第一个孩子”。 该子包含一个符合该描述的标签。

我不清楚你是否想要主要的div的孩子。 如果是的话，使用这个：

 div.section > div 

如果你只想要头，使用这个：

 div.section > div:first-child 

使用>将描述更改为：“查找任何divs是直接后裔div divs”这是你想要的。

请注意，除IE6以外，所有主stream浏览器均支持此方法。 如果IE6的支持是关键任务的，那么你必须将类添加到子div，然后使用它。 否则，这不值得关心。

Answer 2

CSS被称为层叠样式表，因为规则是被inheritance的。 使用下面的select器， 将只select父项的直接子项，但其规则将由该div的子项divs inheritance ：

 div.section > div { color: red } 

现在，这个div 和它的孩子都会red 。 如果您不希望它inheritance，则需要取消在父级上设置的任何内容：

 div.section > div { color: red } div.section > div div { color: black } 

现在只有div.section的直接子div.section是红色的，但是子divs仍然是黑色的。

Answer 3

 div.section > div 

Answer 4

使用div.section > div 。

更好的方法是在CSS中为标题和div.section h1使用<h1>标签，以支持旧版浏览器（不知道关于> ） 并保持标记语义。

Answer 5

发现这个问题在谷歌上search。 这将使用类container返回元素的第一个子元素，而不pipe子元素是什么types。

 .container > *:first-child { }