Question

我需要选择两个元素，跳过接下来的两个元素，选择两个元素等等。

例如，假设我有10个元素：

<div class="container">
    <div class="el">element1</div>
    <div class="el">element2</div>
    <div class="el">element3</div>
    <div class="el">element4</div>
    <div class="el">element5</div>
    <div class="el">element6</div>
    <div class="el">element7</div>
    <div class="el">element8</div>
    <div class="el">element9</div>
    <div class="el">element10</div>
</div>

我想选择元素1,2,5,6,9和10。

有没有办法，利用nth-child或类似方法来实现这一目标？

Answer 1

使用:nth-child() pseudo-class进行此操作。

组合选择器以选择每四个元素的第一个/第二个元素。

Example Here

.container > .el:nth-child(4n+1),
.container > .el:nth-child(4n+2) {
    color: red;
}

＆＃13;

.container > .el:nth-child(4n+1),
.container > .el:nth-child(4n+2) {
  color: red;
}

＆＃13;

<div class="container">
  <div class="el">element1</div>
  <div class="el">element2</div>
  <div class="el">element3</div>
  <div class="el">element4</div>
  <div class="el">element5</div>
  <div class="el">element6</div>
  <div class="el">element7</div>
  <div class="el">element8</div>
  <div class="el">element9</div>
  <div class="el">element10</div>
</div>

＆＃13;

css选择器获得2个元素

1 个答案: