使用伪类选择第一个CSS元素

Question

我有以下结构：

<div class="myClass">1</div>
<div class="myClass">2</div>

如何选择与.myClass匹配的第一个元素？

我知道我可以这样做：[PARENT OF .myClass] .myClass:first-child {/* rules */}但我很好奇是否有一个伪CSS类选择选择器匹配的第一个元素。

这可能吗？怎么样？

jQuery选择器如下所示：.myClass:first，但:first似乎无法在CSS中使用。

Answer 1

好的，我不确定，但这可能适合你。

some.great-selector:first-of-type {
  /* Your rules here */
}

这将仅匹配每个父节点中匹配some.great-selector的第一个子节点。这与:first在JQuery中的作用有所不同，但可能仍然有用，例如与parent >选择器结合使用。

Answer 2

您可以使用：

.myClass:first-of-type {
      background-color:#233423;
      color:#FFFFFF;
    }

http://jsfiddle.net/65adr/44/

或者您可以在这里查看其他替代方案：

http://reference.sitepoint.com/css/css3psuedoclasses

Answer 3

：第一个孩子是你最接近的孩子。虽然如果你正在寻找可以在旧版浏览器中使用的东西，它会得到很好的支持。

如果要在旧版浏览器中获得支持，可以将样式应用于具有特定类名的所有元素，然后将其删除为所有兄弟类，如下所示：

.my-class {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

.my-class + .my-class {
  border-top: none;
}

一个相当随意的例子，但你会明白这一点。