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

试试这个：工作演示

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

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

示例：工作演示

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

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