Question

所以我有一个情况，我有一个像这样的元素列表：

<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>

现在我想要实现的是使用CSS查询将红色背景应用于a的第一次和最后一次出现。所以在上面的例子中：1,3,6,7会使背景颜色为红色。

如何使用css实现这一目标？我已经尝试过使用css兄弟姐妹查询，但我找不到一种方法来确定何时切换 - ＆gt; b发生了。

Answer 1

.a:nth-child(1) {
    background: red none repeat scroll 0 0;
}
.a:nth-child(3) {
    background: red none repeat scroll 0 0;
}
.a:nth-child(6) {
    background: red none repeat scroll 0 0;
}
.a:nth-child(7) {
    background: red none repeat scroll 0 0;
}

<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>

你只需要改变一个你想成为红色背景的人

.a:nth-child(no will come here ) {
    background: red none repeat scroll 0 0;
}

Answer 2

据我所知，你需要在每个出现的第一个和最后一个子元素上应用背景颜色红色。为此请参考以下css代码。

.a:nth-child(2n+1), .a:nth-last-child(2) {
background: red;}

将css样式应用于特定顺序的元素

2 个答案: