在更少的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中的另一種方法

馬丁的回答很好。 僅出於完整性考慮，在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在他的答案中建議的方案，您可以在其中為規則添加一個額外的選擇器，以便以后可以作為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*/
}

Answer 3

我不確定該如何實際完成，但這對我有用。

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

.another-class {
   ._ui-icon;
}