Question

我是.LESS的新手，并且为了避免在同一个容器中重复相同的规则，我想知道是否有更简洁的方法。

到目前为止，我有：

.outer-container {
 .inner-container1, .inner-container2 {
  padding: 0;
  margin-top: 8px;
  }
 .inner-container3 {
   background: none;
   border-top: none;
 }
}

我想要的是.inner-container1，.inner-container2和.inner-container3，以便font-size: 12px不必在每个中重复它。这可能吗？

Answer 1

您可以简单地使用css属性选择器。

div[class^="inner-container"]

将选择所有匹配类的内容与内部容器

有关css MDN

中属性选择器的更多信息

div[class^="inner-container"] {
    font-size: 12px;
}

<div class="outer-container">
  <p>I'm an outsider :(</p>
  <div class="inner-container1">
    <p>Dude, i'm in </p>
  </div>
  <div class="inner-container2">
    <p>me too!!<p> 
  </div>
</div>

使用.LESS从同一容器中的其他2个元素继承样式

1 个答案: