是否有第一个直接孩子的CSS选择器？ [英] Is there a CSS selector for the first direct child only?

问题描述

我有以下html

 < div class =section> 
< div>标题< / div> 
< div> 
内容
< div>子内容1< / div> 
< div>子内容2< / div> 
< / div> 
< / div> 
  

以下样式：

  DIV.section DIV：第一个孩子
 {
 ... 
} 
  

由于某些原因，我不明白该风格已应用于sub content 1 < div> 以及header < div> 。

我认为样式中的选择器只适用于div类的第一个直接子类，其类名为section。

解决方案

您所发布的字面意思是查找任何内部的div他们是父母的第一个孩子。该子包含一个符合该描述的标签。

目前还不清楚您是否希望主要div的两个孩子。如果是这样，请使用：

  div.section> div 
  

如果您只需要标题，请使用以下内容：

  div.section> div：first-child 
  

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

请注意，所有主流浏览器都支持这种方法，除IE6外。如果IE6的支持是关键任务的，那么您将不得不将类添加到子div并使用它。否则，这不值得关注。

I have the following html

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

And the following style:

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

For some reason that I don't understand the style is getting applied to the "sub contents 1" <div> as well as the "header" <div>.

I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?

解决方案

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

这篇关于是否有第一个直接孩子的CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！