1

如何更有效地编写此代码？我不想.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;
}

4

5 回答 5

3

尝试：

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

这针对所有以glyphicon-

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

你必须记住的 30 个 CSS 选择器

于 2018-01-05T13:24:57.110 回答
3 
.btn:hover [class*='glyphicon-'] {...}

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

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

...所以当.glyphicon-*它不是.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 的看法相反。
如果效率是用输入的字符来衡量的，我猜模式会赢。如果以编写代码所花费的时间来衡量，那么它因人而异，并且更多地与知识有关，而不是语法。

于 2018-01-05T13:24:05.503 回答
1

如果您不需要选择影响哪些字形图标，那么推荐 CSS Regex 的答案肯定会解决您的问题。

如果你需要它具体化，不幸的是 CSS 的限制就止于此了，你应该考虑使用像Sass这样的预处理器或像PostCSS这样的后处理器来帮助减少低效的编码时间。

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

如果你使用 Sass，会给你相同的输出。

于 2018-01-05T13:31:47.837 回答
1

您可以为此使用 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;
  }
}
于 2018-01-05T13:31:03.147 回答
0

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

于 2018-01-08T13:48:41.147 回答