Question

有更优雅的方式来写这个吗？

.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)

编辑：简化的帖子和代码。 <section>将始终有.standard个班级和.color-班级.color-0为background-color: transparent;。

Answer 1

不幸的是，由于选择器的静态特性，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;
    }
  }
}

这又需要事先知道这些值。如果你不能写下所有可能的值（或者你不想写），你需要编写一个脚本来检查运行时的值。

是否存在具有相同属性值的2个或更多元素的选择器？

1 个答案: