的第一個子元素

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/