0

我正在尝试用更少的方式扩展 Fontello 生成的图标伪类。

现在虽然这有效：

.icon-extended:before:extend(.icon-caret-n:before) {}

这不会：

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

看不出来为什么？

在li:before这种情况下，将从 中获取内容定义.icon-ok:before，而不是从 中获取一般样式[class^="icon-"]:before, [class*=" icon-"]:before。

对我来说似乎是一个错误？

4

1 回答 1

2

你的第一个案例...

.icon-extended:before:extend(.icon-caret-n:before) {}

...您正在扩展具有类本身命名的东西，.icon-extended以便该类也匹配选择器[class^="icon-"], [class*=" icon-"]，因此它为什么起作用（在这种情况下它与 无关:extend）。

你的第二个案例...

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

...您正在扩展的东西没有icon-在其选择器中注明的 a 值，ul.checked li因此不会也不应该匹配。现在您的扩展不会更改类名，而只是将选择器添加到代码块定义（并且仅该代码块）。LESS 扩展纯粹是查看选择器字符串，而不是“智能”地知道这样的选择器将匹配其他选择器字符串（这基本上是 7-phases-max 的评论的内容）。所以你必须明确地这样做，最好是这样：[class^="icon-"][class*=" icon-"].icon-ok:before.icon-ok:before[class^="icon-"][class*=" icon-"]

ul.checked li:before:extend(
  .icon-ok:before,
  [class^="icon-"]:before,
  [class*=" icon-"]:before) {
    color: #4fa33b;
}
于 2013-11-29T13:40:46.043 回答