以下CSS可以进一步简化吗？

Question

以下CSS可以进一步简化吗？

 .firstLevel .secondLevel .k-button,
 .firstLevel .secondLevel .k-input
 .firstLevel .secondLevel .k-picker-wrap,
 .firstLevel .secondLevel .k-textbox {
    border-style: none;
 }

Answer 1

这在很大程度上取决于您的HTML结构以及您正在使用的其他类.

以下slector将匹配具有以k- AND开头的类名的所有元素,其中父.secondLevel类具有类,父类具有更高的.firstLevel类.:

.firstLevel .secondLevel [class^="k-"] {border-style:none;}

这是一个例子:

.firstLevel .secondLevel div {
  border: 1px solid green;
  margin: 10px auto;
}

.firstLevel .secondLevel [class^="k-"] {
  border-color: red;
}
.firstLevel .secondLevel div:before{
  content:' Class : ' attr(class);
 }

<div class="firstLevel">
  <div class="secondLevel">
    <div class="k-something"></div>
    <div class="k-otherthing"></div>
    <div class="m-something"></div>
    <div class="k-something-else"></div>
  </div>
</div>