适用于多个元素的最短选择器

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 {
  /* ... */
}