css - 单个 div 上的多个伪类

Question

我正在尝试在一组无限的 Div 上创建外边框效果。

所以我尝试混合使用伪类，例如 :first-of-type 和 :nth-of-type(#) 但 :nth-of-type(#) 覆盖了 :first-of -类型。

.quarter > div:first-of-type { border-right:dashed #cccccc 1px; border-bottom: dashed #cccccc 1px; padding: 10px; box-sizing: border-box; }
.quarter > div:nth-of-type(3n+1) { border-right: none; border-bottom: dashed #cccccc 1px; }

所以除了第三行的最后一个和第一个，我需要用 Jquery 进行编码，所以这应该缩短所有内容，但我只需要知道这是否可行。哦，如果有人有更好的方法，请务必帮助兄弟。 :)

Answer 1

:first-of-type 是 :nth-of-type(3n+1) 的子集，对于 n = 0(因为 3(0) + 1 = 1).这就是您看到覆盖的原因，因为这两个规则都匹配第一个 div。

由于您的两个选择器都是同样具体的，并且您的第二条规则中没有其他声明不存在于您的第一条规则中，您只需将您的两条规则的位置交换为您的 :first-of-类型规则优先:

.quarter > div:nth-of-type(3n+1) { border-right: none; border-bottom: dashed #cccccc 1px; }
.quarter > div:first-of-type { border-right:dashed #cccccc 1px; border-bottom: dashed #cccccc 1px; padding: 10px; box-sizing: border-box; }