CSS 中将多个具有相同属性选择器的选择器组合成一个选择器

编程问答 2022-05-03

问题描述

是否可以在CSS/SASS/LESS中将多个具有相同属性的选择器组合成一个选择器而不重复该属性？

例如：

div.foo[data="123"] {
  color: red;
}

p.bar[data="123"] {
  color: red;
}

p.bar[data="123"],div.foo[data="123"]{
  color: red;
}

以某种方式组合它们？比如这个无效的场景：

(div.foo,p.bar)[data = "123"] {
  color: red;
}

解决方法

你可以这样做：

div.foo,p.bar {
    &[data="123"] {
        color: red;
    } 
}
  • 第一步：
    结合您的主要选择器
  • 第二步：
    添加数据选择器
lesssasssass