Question

我已经创建了一个包含 81 个 div 的元素列表。

我想要选择其中的第 28 到 36 个元素。

如何使用一些 CSS 选择器来实现这一点？

我猜测我们需要使用 nth-child，但它需要公式。

我可以使用类似于“nth-child(9n + 3)”的方法选择第 3、12、21、30、39、48、57、66 和 75 个元素。

Answer 1

你可以通过链式伪选择器来实现这一点。

div:nth-child(n+28):nth-child(-n+36){

}

Answer 2

使用 :nth-child() 伪类从第 28 个开始选择，到第 36 个结束选择。

您可以通过将两个选择器连接在一起来完成这项任务。

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
  grid-gap: 5px;
}

div:nth-child(n+28):nth-child(-n+36){
   background-color: lightgreen;
}

/* 非必要的装饰性样式 */
div {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>01</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>81</div>

使用 nth-child 选择器选择元素的范围。

2 个答案: