Question

CSS：

.discussionLevel-1 {padding: 20px 0px 20px 70px;}
.discussionLevel-2 {padding: 20px 0 20px 90px;}
.discussionLevel-3 {padding: 20px 0 20px 110px;}

我正在尝试将每个 n＆gt; 3 设置为 n = 3 。

问：如何使用选择器

.discussionLevel-4
.discussionLevel-5
.discussionLevel-6
...

等与.discussionLevel-3相同？

有什么想法吗？

Answer 1

您需要:nth-child(n+3)选择器。假设你有一个包装div。

<强> Working Demo

HTML

<div class="discussion">
<div class="discussionLevel-1">hi</div>
<div class="discussionLevel-2">hi</div>
<div class="discussionLevel-3">hi</div>
<div class="discussionLevel-4">hi</div>
<div class="discussionLevel-5">hi</div>
<div class="discussionLevel-6">hi</div>
<div class="discussionLevel-7">hi</div>
</div>

CSS

.discussionLevel-1 {padding: 20px 0px 20px 70px;}
.discussionLevel-2 {padding: 20px 0 20px 90px;}

.discussion div:nth-child(n+3) {padding: 20px 0 20px 110px;} 
/*All div after and including div 3*/

Answer 2

您可以在那里使用nth-child，但不会尊重您的课程，虽然它会为您做同样的工作...如果您处理的是同一级别的各种元素，而不是使用nth-of-type而不是nth-child

Demo

您尚未提供DOM，因此我将使用ul和li

ul li:nth-child(1n) {
    color: red;
}

ul li:nth-child(2n) { /* Targets every 2nd element */
    color: green;
}

ul li:nth-child(3n) { /* Targets every 3rd element */
    color: blue;
}

仍然不确定我何时读取此等与.discussionLevel-3 相同，因此如果您想要在同一级别上跟随.discussionLevel-3后面的所有元素进行定位，样式比使用~

.discussionLevel-3,
.discussionLevel-3 ~ div[class^="discussionLevel-"] {
   /* Styles */
}

第n级后的CSS同类

2 个答案: