.carView .carList .carContent.carName .icon, .carView .carList .carContent.carFrom .icon {
padding-inline-end: 0.5rem;
line-height: normal;
min-width: 1.2rem;
}
我有这个CSS文件,并希望改变它作为少,也想使用我现有的少代码。
.carView {
.carList {
}
}
我试着让它看起来像下面的代码。
.carView {
.carList {
.carContent {
&.carName .icon, &.carFrom.icon {
padding-right: 0.5rem;
line-height: normal;
min-width: 1.2rem;
}
}
}
}
对不对呀?
2条答案
按热度按时间ubbxdtey1#
正确代码为:
或
因为
.carContent.carName .icon
和.carContent.carFrom .icon
是.carView .carList
的子级。db2dz4w82#
一种稍微不同的方法--如果你不想增加选择器的特殊性(例如覆盖第三方样式),并且你可以控制你的html --这意味着你知道应用什么类以及如何应用--那么你可以忽略父选择器,完全删除嵌套,简单地通过它的直接父选择器定位图标。
包含多个父元素的唯一原因是为了区分特定的元素--但完全有可能只有一个类'carName' --所以它与该类的祖父无关。仅直接父元素就足以定位该类。
或者-假设你对html有控制权-然后简单地分配一个公共类(例如:“carIcon”)添加到您想要影响的所有图标,并设置无嵌套的样式