CSS nth-of-type选择器如何实现从开头匹配到第3个div？

该选择器仅命中第3个div，是CSS选择器本身的语法逻辑导致的，核心问题是对通用兄弟选择器~的匹配规则理解有误：

• ~的匹配规则为：选中参考元素之后，与参考元素同属一个父级、且匹配后半段选择器规则的兄弟元素；它既不会选中作为参考的元素本身，也不会自动选中参考元素到目标元素之间的所有节点。
• 拆解你编写的选择器div:nth-of-type(1) ~ div:nth-of-type(3)：
  • 前半段div:nth-of-type(1)只是定位锚点，用来标记同层级下第一个div的位置
  • 后半段div:nth-of-type(3)是实际的元素匹配规则，要求被选中的元素必须满足两个条件：是第一个div的后续兄弟、同时是同层级下的第3个div
• 对照你给出的HTML结构，只有第3个div完全符合上述要求，因此最终只会给第3个div添加红色边框，不会选中第1、2个div。

最简洁的原生CSS写法是利用:nth-of-type的公式参数，直接匹配位置序号≤3的div：

div:nth-of-type(-n+3) {
  border: 1px solid red;
}

公式说明：:nth-of-type的参数-n+3中n会从0开始递增取非负整数，当n=0时值为3、n=1时值为2、n=2时值为1，刚好对应第1、2、3个div；n≥3时计算结果≤0，不会匹配后续元素。

如果需要兼容不支持公式参数的极老旧浏览器，可以用逗号分隔多个选择器，逐个指定要命中的元素：

div:nth-of-type(1),
div:nth-of-type(2),
div:nth-of-type(3) {
  border: 1px solid red;
}

测试参考代码 #

CSS样式代码 #

div:nth-of-type(-n+3) {
  border:1px solid red;
}

HTML结构代码 #

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

运行上述代码后，前3个div会被统一加上红色边框，完全符合预期效果。

内容的提问来源于stack exchange，提问作者Jon Sud