是否有更优雅的方式来写这个？
.standard {
padding-top: 50px;
padding-bottom: 50px;
}
.standard.color-0 + .standard.color-0,.standard.color-1 + .standard.color-1,.standard.color-2 + .standard.color-2,.standard.color-3 + .standard.color-3,.standard.color-4 + .standard.color-4,.standard.color-5 + .standard.color-5,.standard.color-6 + .standard.color-6,.standard.color-7 + .standard.color-7,.standard.color-8 + .standard.color-8 {
padding-top: 0;
}
是否有一些选择器可以检查在2个或更多元素上找到的类的匹配,而实际上并不知道确切类的名称？比如：
.standard.color-* + .standard.color-* {
padding-top: 0;
}
我目前(上面发布的)的工作方式与我在网站上显示的方式一样,但我只是好奇我是否注定要不断添加.standard.color-#.standard. color-#为我需要的每种新颜色(在这种情况下,对于全宽< section>标记,它是背景颜色).
例子：
<section class="standard color-0"></section> // top and bottom padding <section class="standard color-1"></section> // top and bottom padding ----------------------------------------------------------------------- <section class="standard color-1"></section> // top and bottom padding <section class="standard color-1"></section> // padding-top: 0; (if both "color-#" is the exact same this loses its top padding)
编辑：简化的帖子和代码. <节>将始终有一个.standard类和一个.color-类,其中.color-0是background-color：transparent;.
解决方法
不幸的是,由于选择器的静态特性,CSS没有为一个复合选择器提供引用另一个复合选择器的任何部分的方法,甚至不提供
a regex-like syntax.所以你不能,例如,匹配一个元素与相同在两个复合选择器中,类名或属性值为其先前的兄弟,而不对实际值进行硬编码.唯一的解决方案就是你拥有的解决方案.
正如我在回答上面提到的问题的答案中提到的,如果你使用的是预处理器,你可以稍微自动化一下.它仍会在CSS中产生相同的硬编码选择器,但实际编写这些选择器的任务将被卸载到预处理器中.以下是使用SCSS的示例：
.standard {
padding-top: 50px;
padding-bottom: 50px;
&%consecutive {
padding-top: 0;
}
// To accommodate more numbered classes simply edit this loop
@for $i from 0 through 8 {
&.color-#{$i} + &.color-#{$i} {
@extend %consecutive;
}
}
}
这再次需要提前知道这些值.如果你不能写下所有可能的值(或者你不想写),你需要编写一个脚本来检查运行时的值.
