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属性中包含glyphicon-的{{1}}个子元素。如果他们总是直系孩子，你应该使用直接后代操作员：

class

...当.btn:hover > [class*='glyphicon-'] {...}不是.glyphicon-*的直接孩子时，它不适用。

注意：（@Paulie_D）原则上和一般情况下，这比使用.btn更安全，因为当匹配的孩子有多个班级并且匹配的一个不是第一个，选择器不匹配。例如：

[class^="glyphicon-"]

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

Answer 2

尝试：

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

这会定位所有以<{1}}

开始的课程

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

^{The 30 CSS Selectors You Must Memorize}

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 Regex的答案肯定会解决您的问题。

如果你需要它是特定的，不幸的是CSS＆＃39;限制在那里停止，您应该考虑查看像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*/}

css重复，什么更有效？

5 个答案: