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 
}