此问题在此处已有答案:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?(8个答案)
(23个答案)
2天前关闭。
我想使第一个和最后一个 *. highlected * 元素红色。突出显示的类是在中间应该是紫色。寻求动态CSS解决方案的任何数量或安排. highlected
.highlighted {
background: purple;
}
.highlighted:first-child,
.highlighted:last-child {
background: red;
}
<td>
<span>Test</span>
</td>
<td>
<span>Test</span>
</td>
<td>
<span class="highlighted">Test</span>
</td>
<td>
<span class="highlighted">Test</span>
</td>
<td>
<span class="highlighted">Test</span>
</td>
<td>
<span class="highlighted">Test</span>
</td>
<td>
<span>Test</span>
</td>
<td>
<span>Test</span>
</td>
<td>
<span>Test</span>
</td>
1条答案
按热度按时间k5ifujac1#
[我不明白为什么下面的代码片段,它从选择器中省略了tds,工作。我现在做的@temaniafif已经指出,如果tds在trs等中不正确的话,它会被忽略。我把这个帖子留在这里一段时间,看看是否有更多的信息进来。]
对于那些已经实现了CSS的浏览器,你可以使用纯CSS来实现这一点:has. [据我现在所知,这不是真的]
在发布这篇文章的时候,这是大多数主要的浏览器,除了Firefox,它只会实现:如果用户设置了一个标志。
这段代码所做的就是把所有的.highlight标记都涂成红色,然后把所有. highlight标记和前面有. highlighted的标记都涂成紫色,最后一个标记再涂成红色,因为它后面没有. highlighted。