我有一堆元素的类名红色,但我似乎不能选择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 */
}

其他回答

你可以试试这样做吗:

.red:first-of-type {
    border: 5px solid red;
}

你也可以在最后一个元素上使用this(如果你需要的话):

.red:last-of-type {
    border: 5px solid red;
}

试试这个解决方案:

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

CodePen链接

只使用

.home > .red ~ .red{
 border: 1px solid red;
}

它会起作用的。

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

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

我的项目里就有这个。

Div > .b ~ .b:not(:第一个孩子){ 背景:无; } Div > .b { 背景:红色; } < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >