CSS選擇具有某個類的第一個元素

Question

選擇具有某個類的第一個元素的語法是什麼？請指定該選擇方法是否爲CSS3或CSS2.1的一部分。

Answer 1

試試這個

.testparent .test:first-child { 
    color: red; 
} 

<div class="testparent"> 
<div class="test">test</div> 
<div class="test">test</div> 
<div class="test">test</div> 
</div> 

第一個div '測試' 只有紅色。

Answer 2

如果您需要與它的兄弟姐妹中的某一類的第一個元素，你可以使用

.myclass { 
    /* styles of the first one */ 
} 

.myclass ~ .myclass { 
    /* styles of the others (must cancel the styles of the first rule) */ 
} 

不要嘗試使用.myclass:not(.myclass ~ .myclass)做到這一點的只有一個規則，它不會工作因爲:not()只接受圓括號中的簡單選擇器。

如果您想在整個文檔中使用第一個.myclass，則無法單獨使用CSS。

張貼的:nth-of-type()或:nth-child()方法是錯誤的，即使它們碰巧碰巧與您的頁面中的元素相匹配。

兄弟選擇器（〜）的瀏覽器支持：IE7 +和其他所有。

Answer 3

.class-name:first-of-type { 
    ⋮ declarations 
}