CSS -如何获得连续类的元素

uxhixvfz 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(182)

我有十里有相同的类和这之间有4个连续类。我怎么能得到连续类的第一，第二，第三和第四元素？与CSS

.abc {
  color: red;
}

.abc+.xyz {
  color: yellow !important;
}

<ul>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
</ul>`

css

来源：https://stackoverflow.com/questions/74876393/css-how-to-get-elements-of-consecutive-class

2条答案

按热度按时间

hgc7kmma1#

在这种情况下，请尝试以下操作

.abc.xyz:nth-child(4n - 4) {    
 color: yellow !important;
}
.abc.xyz:nth-child(4n - 3) {
 color: green !important;
}
.abc.xyz:nth-child(4n - 2) {
 color: purple !important;
}
.abc.xyz:nth-child(4n - 1) {
 color: blue !important;
}

赞(0）回复(0）举报 2022-12-24

e0bqpujr2#

您差一点就成功了!只需删除+字符

.abc {
  color: red;
}

.abc.xyz {
  color: yellow !important;
}

<ul>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
</ul>

赞(0）回复(0）举报 2022-12-24

我来回答

CSS -如何获得连续类的元素

2条答案

相关问题

热门标签

最新问答