css - 在 less css 中定义一个 CSS3 属性选择器

Question

我正在尝试用更少的 css 做一些与 CSS3 属性选择器相关的事情...

我想做的是，我的代码中使用了以下类:-

*[class^="ui-icon-"] { 
    /*My Styles*/
}

它的实现方式应该是它的样式将被实现到之后定义的另一个类，比方说:-

/*Less*/
.another-class {
   *[class^="ui-icon-"];
}

/*Output CSS*/
.another-class {
   /*My Styles*/
}

这里，我的网页目前显示错误，请问有什么解决办法吗？

Answer 1

LESS 1.4 中的另一种方式

Martin's answer is very good.为了完整起见，在 LESS 1.4 中还有另一种方法可以扩展第二个选择器。这可以让您首先在属性选择器中定义样式:

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
}

然后将它们分组以获得最终的 CSS 输出，如下所示:

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}

当然，您可以颠倒定义它的方式:

.another-class  { 
    /*My Styles*/
}

*[class^="ui-icon-"] {
  &:extend(.another-class all);
}

给出类似的分组输出:

.another-class,
*[class^="ui-icon-"] {
  /*My Styles*/
}

您还可以添加其他需要的样式:

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
  /* Other Styles for another-class */
}

给出这个输出:

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}
.another-class {
  /* Other Styles for another-class */
}