相关疑难解决方法(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？

是否可以使用CSS3选择器:first-of-type选择具有给定类名的第一个元素？我的测试没有成功,所以我认为不是吗？

守则(http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

我试图在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"是永远存在的,这将是一个很好的起点.

说我有这个标记:

<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>

现在这些div在标记中不一定是彼此相邻的,但可以在整个页面中传播.

我是否可以仅使用CSS定位第一次出现的类"当前",我最好避免使用javascript(现在)？

IE浏览器.

.current:first-child {
background: red;
}