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

Question

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

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

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

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

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

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

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

score 3 · Accepted Answer

LESS 1.4 中的另一种方式

马丁的回答很好。为了完整起见，在 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 */
}

score 2 · Accepted Answer

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

因此，一种解决方案是laat 在他的回答中建议的一种解决方案，您可以在规则中添加一个额外的选择器，您可以稍后将其作为 mixin 调用。另一种方法是在其中定义所有属性.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*/
}

score 1 · Accepted Answer

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

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

.another-class {
   ._ui-icon;
}