CSS select：nth-​​of-class（）替代

Question

使用CSS：我如何定位第一类“方法”，第二类和第三类。所有这些都需要不同的风格。我不能添加额外的课程来避免反应迷失方向。

HTML code：

<div class="approaches">
    <div class="col-md-4">
        <a href="#" class="approach">content here...</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="approach">content here...</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="approach">content here...</a>
    </div>
</div>

CSS代码（目前不起作用）：

.approaches .approach:nth-of-type(1){
    color: red;
}
.approaches .approach:nth-of-type(2){
    color: green;
}
.approaches .approach:nth-of-type(3){
    color: blue;
}

Answer 1

<div>和.approaches元素之间存在.approach，阻止您的:nth选择器正常工作。选择器在自己的嵌套级别中查找元素，并且因为.approach元素包含在<div>中，所以它们具有单独的嵌套级别。请改用<div>上的选择器：

.approaches div:nth-of-type(1) .approach {
    color: red;
}
.approaches div:nth-of-type(2) .approach {
    color: green;
}
.approaches div:nth-of-type(3) .approach {
    color: blue;
}

Answer 2

您可以像其他人所建议的那样使用.approaches div:nth-of-type(1) .approach { }，但这假设.approaches中的每个div都有一个a和.approach类，所以它如果那是你想要的，那么实际上不能被认为是实现相当于不存在的nth-of-class的一般方法。

要做到这一点，你可以使用一些JS：

[].forEach.call(document.getElementsByClassName('approach'), function(elt, i) {
    elt.classList.add('approach-' + i);
});

.approach-1 { color: red; }

对任何类进行推广：

function add_nth_of_class(cls) {
    [].forEach.call(document.getElementsByClassName(cls), function(elt, i) {
        elt.classList.add(cls + '-' + i);
});

add_nth_of_class('approach');

但是，这将在整个文档中按顺序对类进行编号。要获得真实nth-of-class，基于父元素中的位置，我们需要使用鲜为人知的TreeWalker API执行以下操作：

function add_nth_of_class(cls) {
    var walker = document.createTreeWalker(document, NodeFlter.SHOW_ELEMENT), n;

    while (n = walker.nextNode()) {                    //for each node in turn,
        [].filter.call(n.childNodes, function(elt) {   //find the children which 
            return elt.classList.contains(cls);        //contain the class we want
        }).forEach(function(elt, i) {                  //and for each of those
            elt.classList.add(cls + '-' + (i+1));      //add a numbered class
        });
    }   
}

CSS：

.approach-1 { // targets all elements with class .approach first within their parent

Answer 3

.approaches > div:nth-child(1) .approach {

}

.approaches > div:nth-child(2) .approach {

}

.approaches > div:nth-child(3) .approach {

}