css - 重构 CSS 类重新选择器

Question

如何重构以下 CSS 类选择器？

.second-panel .k-block, 
.second-panel .k-header, 
.second-panel .k-grid-header,
.second-panel .k-toolbar, 
.second-panel .k-grouping-header, 
.second-panel .k-pager-wrap,
.second-panel .k-draghandle 
 {
background-color: red;
 }

Answer 1

试试这个:Working Demo

.second-panel *[class^="k-"] {
   background-color: red;
}

同样，如果您只有 1-2 个元素的异常(exception)，您可以使用 :not 选择器来避免为它们提供以下样式。

示例:Working Demo

.second-panel *[class^="k-"]:not(.k-noapply):not(.k-noapply2) {
   background-color: red;
}

但我建议将此作为最后的选择。因为如果此类元素的数量增加，您最终会按照问题中实际写的内容进行操作。因此您只需 1-2 个元素即可完成此操作。