CSS重复，有什么更有效的方法？

Question

如何更有效地编写此代码？ 我不想每次都写.btn:hover 。

 .btn:hover .glyphicon-minus, .btn:hover .glyphicon-ok, .btn:hover .glyphicon-remove, .btn:hover .glyphicon-trash, .btn:hover .glyphicon-arrow-left, .btn:hover .glyphicon-arrow-right, .btn:hover .glyphicon-eye-open, .btn:hover .glyphicon-floppy-disk, .btn:hover .glyphicon-print .btn:hover .glyphicon-pencil{ color: black !important; } 

Answer 1

.btn:hover [class*='glyphicon-'] {...}

...匹配.btn:hover所有子元素，它们的class属性中包含glyphicon- 。 如果它们始终是直系子代，则应使用直接后代运算符：

.btn:hover > [class*='glyphicon-'] {...}

...因此，当.glyphicon-*不是.btn直接子代时， .btn 。

---

注意： （@Paulie_D）原则上，对于一般情况，这比使用[class^="glyphicon-"]更安全，因为当匹配的子项有多个类且被匹配的子项不是第一个时，则选择器不匹配。 例如：

<a class="btn"><i class="glyphicon glyphicon-floppy-disk"></i>Old devices</a>

---

注意： （@ GeomanYabes，关于使用SASS的建议）。 使用（或不使用）SASS通常与您工作的团队/公司的堆栈有关，与开发人员的个人选择或项目/客户的要求有关，而不是在特定项目的特定情况下（例如，上面的一个）。 我的意思是如果你有像这样的情况，你不会选择使用SASS，如果没有，那就放弃它 。 该决定基于更大的考虑，并且无论如何都要做出。 根据经验，我告诉所有人 ：如果您编写CSS， 请使用SASS 。 回到您的建议和问题，请注意，SASS生成了CSS，而CSS不一定更高效 ，这是OP似乎有意要求的，无论是否有意。
在效率方面，例如渲染速度和浏览器性能，我必须说我真的不确定两者之间哪个代码更有效（指定每种情况或一个模式）。 我假设解析器上的模式应该更重一些，而且额外的权重可能无法证明较短语法所保存的字符是合理的。
无论如何，差异是如此之小，以至于在99.99％的情况下，它们都不重要。 无论如何，如果您决定追求这个问题，那么我对任何结果/测试都非常感兴趣。 可以说，我选择将CSS看作是一种业余爱好，而不是一份工作，这与我最近对JavaScript的看法相反。
如果以键入的字符来衡量效率，我猜该模式会胜出。 如果以花费在编码上的时间来衡量，它会因人而异，并且与知识有关的多于语法。

Answer 2

尝试：

.btn:hover [class^="glyphicon-"]

定位以glyphicon- 开头的所有类

克拉符号。 在正则表达式中最常使用它来指定字符串的开头。

^{您必须记住的30个CSS选择器}

Answer 3

您可以为此使用LESS或SASS。 它允许您将类/标签/ ID和其他选择器相互嵌套。 这样你可以写

.btn:hover {
  .glyphicon-minus,
  .glyphicon-ok,
  .glyphicon-remove,
  .glyphicon-trash,
  .glyphicon-arrow-left,
  .glyphicon-arrow-right,
  .glyphicon-eye-open,
  .glyphicon-floppy-disk,
  .glyphicon-print,
  .glyphicon-pencil {
    color: black !important;
  }
}

Answer 4

如果您不需要选择要影响哪些字形，建议CSS正则表达式的答案肯定会解决您的问题。

如果您需要具体说明，不幸的是CSS的局限性就此停止了，您应该考虑研究像Sass这样的预处理器或像PostCSS这样的后处理程序，以帮助缩短编码时间。

.btn:hover {
     .glyphicon {
        &-minus,
        &-ok,
        &-remove,
        &-trash,
        &-arrow-left,
        &-arrow-right,
        &-eye-open,
        &-floppy-disk,
        &-print
        &-pencil {
            color: black !important;
        }
    }
}

如果您使用的是Sass，则会提供相同的输出。

Answer 5

尝试.btn:hover:matches(.glyphicon-minus, .glyphicon-ok, .glyphicon-remove, .glyphicon-trash, .glyphicon-arrow-left, .glyphicon-arrow-right, .glyphicon-eye-open, .glyphicon-floppy-disk, .glyphicon-print .glyphicon-pencil) {/*your css*/}