用较少的CSS定义CSS3属性选择器

Question

我正在努力做一些与 CSS3属性选择器相关的东西，而css ......

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

*[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 */
}

Answer 2

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

• LESS中的Mixins（可重用规则）应以.或#开头，
• 他们不能包含"，=，*和^等字符（如果它们未转义）。

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

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

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

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

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

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

.another-class {
    .mystyles;
}

在两个示例中，渲染的CSS将如下所示：

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

Answer 3

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

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

.another-class {
   ._ui-icon;
}