重构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个元素的例外，你可以使用:not选择器来避免给他们以下样式。

实施例：Working Demo

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

但我建议将此视为最后一种选择。因为如果这些元素的数量增加，你最终会做出实际写在问题中的内容。所以你只需1-2个元素即可。