在较少的 css 中定义一个 CSS3 属性选择器答案

【问题标题】：define a CSS3 Attribute Selectors in less css在较少的 css 中定义一个 CSS3 属性选择器
【发布时间】：2013-05-28 21:48:20
【问题描述】：

我正在尝试用较少的 css 做与 CSS3 属性选择器相关的工作...

我想做的是，我的代码中正在使用以下类：-

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

这应该以一种方式实现，它的样式将被实现到之后定义的另一个类，比如说：-

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

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

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

【问题讨论】：

【解决方案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 */
}

【讨论】：

【解决方案2】：

尝试像这样调用属性选择器有两个问题。

因此，一种解决方案是laat suggests in his answer，您可以在其中向规则添加一个额外的选择器，您可以稍后将其作为混合调用。另一种方法是在 .another-class 中定义所有属性（因为此选择器是一个有效的混合名称）并使用属性选择器从规则内部调用它，如下所示：

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

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

或者将一组属性添加到多个规则的另一种方法是使用参数混合。像这样：

.mystyles(){/*My Styles*/}

*[class^="ui-icon-"] {
    .mystyles;
}

.another-class {
    .mystyles;
}

在这两个示例中，呈现的 CSS 将如下所示：

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

【讨论】：

【解决方案3】：

我不确定实际上应该如何完成，但这对我有用。

._ui-icon, *[class^="ui-icon-"] { 
    color: black;
}

.another-class {
   ._ui-icon;
}

【讨论】：