单个div上有多个伪类

Question

我正试图在一组无限的Div上创建一个向外的边界效果。

所以我试图使用混合的Pseudo类，例如：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

对于n = 0，

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

由于您的两个选择器都具有相同的特定性，并且您的第二条规则中没有其他声明在您的第一条规则中没有出现，您只需将两条规则的位置换成:first-of-type规则即可的优先级：

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