将样式应用于相似元素行中的第一个元素答案

【问题标题】：Apply style to first element in a row of similar elements将样式应用于相似元素行中的第一个元素
【发布时间】：2013-05-22 04:39:12
【问题描述】：

我有以下列表（数字仅供参考）

<div class="A">alpha1</div>
<div class="B">alpha2</div>
<div class="A">alpha3</div>
<div class="A">alpha4</div>
<div class="A">alpha5</div>
<div class="B">alpha6</div>
<div class="A">alpha7</div>

我想将一种样式应用于 DIVS 1、3 和 7，因为它们是同一类的一行元素中它们的类 (A) 中的第一个。有没有我可以使用的伪元素/魔法？类似（发明）

not(.A) & .A {color:red} -> if class is A and it is not preceded by an A

谢谢！

【问题讨论】：

标签： css css-selectors

【解决方案1】：

您使用 :not() 伪类和相邻的兄弟组合 + 来匹配前面没有紧跟 .A 的 .A：

:not(.A) + .A

您还需要使用:first-child 选择第一个.A 元素，因为它前面没有任何内容：

.A:first-child

把它们结合起来，你就有了：

:not(.A) + .A, .A:first-child { color: red; }

jsFiddle demo

【讨论】：

这看起来像是一个正确的 CSS 解决方案。如果您不必支持旧版浏览器，这绝对是您应该做的。

【解决方案2】：

这是一个使用 JavaScript 的跨浏览器解决方案：

http://jsfiddle.net/YhvGw/

function applyStyleToFirstDiv(className, styleAttr, val,baseSelector) {
    //Allow to specify a base element to search in
    if(baseSelector == null){
        baseSelector = document    
    }
    var divElements = baseSelector.getElementsByTagName("div"),
        len = divElements.length;
    var prevWas = false,currentIs;
    // Go through all the divs
    for (var i = 0; i < len; i++) {
        var cur = divElements[i];
        var classes = cur.className.split(" ");
        currentIs = false;
        for (var j = 0; j < classes.length; j++) {
            //If you find a matching class
            if (classes[j] === className) {
                currentIs = true;
                break;
            }
        }
        //If the current one matches, and the last one didn't, apply the style, otherwise don't
        if(currentIs && !prevWas){
            cur.style[styleAttr] = val;    
        }
        prevWas = currentIs;

    }
}
//usage sample
applyStyleToFirstDiv("A","color","yellow");

【讨论】：

只有在他事先知道哪些孩子需要这种风格时才有效。我认为他真正想做的是让浏览器自己弄清楚，这样如果内容发生变化就不必调整它。
这也只选择第一个孩子，而不是集群中的第一个。
@BoltClock 哦，等等，你是对的，我刚刚理解了这个问题。马上修复
我也发布了一个答案。如果浏览器支持不是问题，这实际上非常简单，但我想看看使用 JS 能想出什么，因为使用纯 CSS2 选择器不容易做到。
@BoltClock 我添加了一个 JavaScript 解决方案。你的纯 CSS 看起来不错。

【解决方案3】：

这是一个例子：

div:not(.A) + .A, .A:first-of-type{
color:red;
}

【讨论】：