1

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

<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

谢谢！

4

3 回答 3

4

您将:not()伪类与相邻的同级组合器一起使用+以匹配.A前面没有紧跟的 an .A：

:not(.A) + .A

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

.A:first-child

将它们结合起来，您将拥有：

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

jsFiddle 演示

于 2013-05-21T20:28:51.377 回答
3

这是一个使用 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");
于 2013-05-21T20:24:21.713 回答
1

这是一个例子：

div:not(.A) + .A, .A:first-of-type{
color:red;
}
于 2013-05-21T20:38:54.027 回答