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

其他回答

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

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

您可以将代码更改为这样的内容以使其工作

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

这是你的工作

.home span + .red{
      border:3px solid green;
    }

这里有一个来自SnoopCode的CSS参考。

为了匹配选择器,元素的类名必须为红色,并且必须是其父元素的第一个子元素。

<div>
    <span class="red"></span> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"></p> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></p></div> <!-- MATCH -->
</div>

你可以试试这样做吗:

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

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

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

我相信使用相对选择器+来选择紧随其后的元素,在这里工作得最好(正如之前很少有人建议的那样)。

这种情况下也可以使用这个选择器

.home p:first-of-type

但这是元素选择器,不是类选择器。

这里你有一个CSS选择器列表:https://kolosek.com/css-selectors/