如何在Less中仅使.examine-type类的height样式生效？

嘿，这个需求很好实现，我给你两种清晰的方案，你可以根据自己的代码习惯选择：

方案一：拆分共用样式与单独样式（推荐） #

这种方式最直观，也方便后续维护——把两个类的共用样式抽出来，再单独给.examine-type加上height样式：

// 两个类共用的样式放在这里
.business-type, .examine-type {
  // 比如这里放你原来写的其他样式：padding、border、color等等
  // ...
}

// 仅给.examine-type设置height
.examine-type {
  height: 74px!important;
}

这样.business-type会继承共用样式，但不会有height属性，完美符合你的需求。

方案二：在原有选择器内嵌套单独样式 #

如果你不想拆分代码块，也可以用Less的父选择器&来精准定位：

.business-type, .examine-type {
  // 这里放两个类的共用样式
  // ...

  // 仅当当前选择器是.examine-type时，才应用height
  &.examine-type {
    height: 74px!important;
  }
}

这种写法编译后会生成重复的.examine-type选择器，但浏览器能正常识别，效果和方案一完全一致。

小提醒 #

尽量少用!important，如果可以通过提高选择器优先级（比如加上父元素选择器）来覆盖样式，会让代码更健壮哦～

内容的提问来源于stack exchange，提问作者sof-03