使用伪类选择第一个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;
}

一个相当武断的例子，但你会明白的。