我正在尝试在一组无限的 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 进行编码,所以这应该缩短所有内容,但我只需要知道这是否可行。哦,如果有人有更好的方法,请务必帮助兄弟。 :)
最佳答案
: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; }
关于css - 单个 div 上的多个伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22817075/