CSS选择器，用于选择给定类的第一个元素

我试图在id为或类为“B”的元素中选择类为“a”的第一个元素。我尝试了>+和第一个子选择器的组合，因为它不是类元素“B”中的第一个元素。它起作用了，但是。。。我试图覆盖一些默认的css，但我无法控制服务器端，似乎类“A”元素有时是在不同的位置生成的。下面是一个例子：

可能有不同的名字
结构和元素计数可能不同
我们的目标
这不应该受到影响
这不应该受到影响

---

有时类“B”的名称不同，“A”之前的元素也不同。那么，有没有办法选择元素“C”中第一次出现的“A”？因为C类总是在那里。我不能使用+>和第一个子选择器，因为第一个“A”元素的路径不同，但元素“C”总是在那里，这将是一个很好的起点。

CSS3提供了

：type of first of type

伪类，用于选择与其同级相关的类型的第一个元素。但是，它没有类的第一个伪类

作为一种解决方法，如果您知道其他

.a

元素的默认样式，则可以使用通用同级组合器

~

的覆盖规则对其应用样式。这样，您可以“撤销”第一条规则

坏消息是

~

是CSS3选择器。
好消息是IE从IE7开始识别它，就像CSS2的

，所以如果你担心浏览器兼容性，唯一失败的“主要浏览器”是IE6

所以你有两条规则：

.C > * > .A {
    /* 
     * Style every .A that's a grandchild of .C.
     * This is the element you're looking for.
     */
}

.C > * > .A ~ .A {
    /* 
     * Style only the .A elements following the first .A child
     * of each element that's a child of .C.
     * You need to manually revert/undo the styles in the above rule here.
     */
}

样式如何应用于图元，如下所示：

内容
内容
内容
内容
内容
内容
内容
内容

此元素没有类

A

。没有适用的规则

此元素具有类

A

，因此应用第一条规则。但是，它之前没有出现任何其他此类元素，

~

选择器需要这些元素，因此第二条规则不应用

此元素具有类

A

，因此应用第一条规则。根据

~

的要求，它还位于同一父级下具有相同类的其他元素之后，因此第二条规则也适用。第一条规则被覆盖

---

我心中有一个CSS3选择器，但对它的支持非常少（例如，除了IE9之外，没有任何IE支持它）。是的，CSS2会很好。对于后代来说，我的新解决方案仍然使用CSS3，但这次IE7+支持它。10个月前，当我使用

编写时，我抽的是什么：第一种类型的
？@BoltClock可能是一些非常强大的东西是否有可能逆转这一过程？然后选择最后一个元素，而不是除第一个之外的所有元素？“样式除第一个之外的所有元素。A是.C的孙子”不太准确。实际上，它只对-.C的每个子级中的第一个进行样式设置。@oriadam:因为：not（）不接受组合符。