我想用一个选择器选择所有元素,从第 4 个开始。但我不想选择第 4 个元素,如果它是最后一个元素。
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n+4):not(:nth-child(4):last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
jsfiddle: https://jsfiddle.net/e9fgdeu1/
最佳答案
我认为只有一个选择器是不够的。但是可以使用以下选择器完成:
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
关于css - 选择第 n 个元素,除非元素位于特定位置并且是 CSS 的最后一个子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41237291/