Question

所以我想将样式应用于包含类缩略图的所有元素，但最后四个除外。

到目前为止，这是我的代码。

.thumbnail:nth-child(){...}

nth-child（）函数中有一些东西，但我无法弄清楚它是什么。

Answer 1

.thumbnail:not(:nth-last-child(-n + 4)) {
    /* .. */
}

但是，如果您尝试使用:nth-child()来设定某个班级的孩子，那么它就不会起作用。

:nth-child()伪类仅在父级中设置子级样式。它对元素类属性一无所知。

Answer 2

http://jsfiddle.net/sC2L5/

<style type="text/css">
.thumbnail {
    width:100px;
    height:20px;
    margin:10px;
    background-color:orange;
}

/* all the magic happens here*/
.thumbnail:nth-last-child(-n+4) {
    background-color:red;
}

</style>


<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>

Answer 3

您也可以从最后一个中选择第五个并在其背后设置样式： DEMO

 .thumbnail:nth-last-child(5)~.thumbnail {
    background-color:red;
}

设置除最后四个之外的所有元素

3 个答案: