css - 多个元素的最短选择器

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 将与您已经编写的内容类似。

有时，为共享样式的元素添加一个公共(public)类可能会更好。因此，在您的 .btn + .btn 和 i + i 元素中，添加一个类，例如 btn_and_i，这样您就可以将它们作为目标单个选择器:

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

如果您一心想让它成为“最短”的选择器，那么可以向目标元素添加一个单字符类，例如 "a"。

.a {
  /* ... */
}