多个元素的最短可能选择器

Question

我想为多个选择器应用一个CSS规则。像这样：

.btn-group.pull-right.with_space .btn + .btn, .btn-group.pull-right.with_space i + i{
    margin-left: 10px;
}

现在我的问题是，如果有更短的方法可以做到这一点。 （因为两个选择器的父元素相同，而且不同之处仅在于最后一个子元素。）

Answer 1

要扩展我的评论，如果您选择使用CSS预处理器，例如SASS或LESS，您可以执行嵌套选择器，如下所示：

/* SASS example */
.btn-group.pull-right.with_space {
  i + i, .btn + .btn {
     /* ... */
  }
}

编译完成后，生成的CSS将与您已编写的内容类似。

有时，将共同类添加到共享样式的元素可能更好。因此，在.btn + .btn和i + i元素中添加一个类，例如btn_and_i，这样您就可以使用单个选择器来定位它们：

/* CSS example */
.btn_and_i {
   /* ... */
}

如果你真的想要使它成为“最短”的选择器，那么就可以在目标元素中添加单个字符类，例如"a"。

.a {
  /* ... */
}