html - 下面的 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 结构和您使用的其他类。

以下选择器将匹配所有具有以 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>