我有一堆元素的类名红色,但我似乎不能选择class="red"使用以下CSS规则的第一个元素:

.home .red:第一个孩子{ 边框:1px纯红色; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

这个选择器出了什么问题,我如何纠正它,以类红色为目标的第一个孩子?


当前回答

我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类,你需要使用

.home > .red:first-child {
    /* put your styling here */
}

其他回答

由于其他答案涵盖了它的问题,我将尝试另一半,如何解决它。不幸的是,我不知道你有一个CSS唯一的解决方案,至少不是我能想到的。还有一些其他的选择....

在生成元素时给元素赋一个first类,如下所示: <p class="red first"></p> . < div class = "红色" > < / div > CSS: 当代。红色{ 边框:5px纯红色; } 这个CSS只匹配第一个类和红色类的元素。 或者,在JavaScript中做同样的事情,例如这里是你会使用jQuery来做这件事,使用与上面相同的CSS: $ (r:首先).addClass(“第一”);

你可以使用n -of-type(1),但要确定网站不需要支持IE7等,如果是这种情况,使用jQuery添加主体类,然后通过IE7主体类找到元素,然后元素名称,然后添加第n个子样式。

试试这个解决方案:

.home p:first-of-type { 边框:5px纯红色; 宽度:100%; 显示:块; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

CodePen链接

我很惊讶没有人提到最干净的解决方案:

r:没有。红色~ .红色){ 边框:1px纯红色; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

你可以使用first-of-type或n -of-type(1)

r { 颜色:绿色; } /* .red:n -of-type(1) */ r: first-of-type { 颜色:红色; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >