使用第 n 个子选择器选择一系列元素 [重复]

Question

我制作了一个元素列表，其中连续包含 81 个 div。

我要选择里面的元素28到36。

如何使用一些 CSS 选择器来做到这一点？

我想我们必须使用第 n 个孩子，但它需要一个公式。

我可以使用类似的方法选择元素 3、12、21、30、39、48、57、66、75

nth- child(9n + 3)

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;
}

/* non-essential decorative styles */
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>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>81</div>