的第一个子元素

Question

CSS选择比方说，我的HTML看起来像这样：

<div class="container"> 
    <... some html here ...> 
</div> 

我想要得到的.container的第一直接子。

我可以做.container > div:first-child但这是假设它是div并非总是如此。

Answer 1

使用:first-child伪类没有标记名：

.container > :first-child 

这会抢那是即时的第一个孩子，不论其标记名的任何元素。这与我们使用其他伪类（例如:hover）的方式类似，后者仅针对任何元素，而a:hover仅针对锚的悬停状态。

Answer 2

不使用元素本身，但一个类是一个更好的解决方案和方式更多语义由于很多原因。

，并给予类元素的孩子，不仅是这样的容器：

HTML：

<article class="container"> 
    <p class="blah">First paragraph...</p> 
    <p class="blah">Lorem ipsum...</p> 
    <p class="blah">Dolor sit amet...</p> 
</article> 

CSS：

.blah { 
    background: red; 
    color: white; 
} 

.blah:first-child { 
    background: #000; 
} 

你可以看到它在行动这里：http://jsfiddle.net/Roobyx/ygP4B/