相关疑难解决方法(0)

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

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

<p class="red"></p>
<div class="red"></div>

这个选择器有什么问题,我该如何纠正？

感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:

.home .red:first-child {
    border: 1px solid red;
}

<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>

我怎样才能让第一个孩子上课red？

我试图在id或类'B'的元素中选择类'A'的第一个元素.我尝试过> +和first-child选择器的组合,因为它不是类元素'B'中的第一个元素.它的工作,但是...我试图覆盖某些默认的CSS和我有在服务器端没有控制权,它似乎是类"A"元素在不同的位置,有时产生.这是一个例子:

<class-C>
  <class-B> might have a different name
      <some-other-classes> structure and element count might differ
      <class-A></class-A> our target
      <class-A></class-A> this shouldn't be affected
      <class-A></class-A> this shouldn't be affected
  </class-B>
</class-C>

有时,"B"类的名称不同,"A"之前的元素也不同.那么有没有办法在元素'C'中选择第一个'A'？因为'C'级总是在那里.我不能使用+>和第一胎选择,因为"A"元素不同的路径,第一,但元素"C"是永远存在的,这将是一个很好的起点.