html - 在 Less 中扩展属性 ="value"选择器

Question

我正在使用语义并尝试扩展他们的网格以适应内置的 CMS 功能。通常，这只是使用 &:extend(classname all) 的简单问题。然而，Semantic 有一些独特的编码方式，这使得这变得非常困难。

我试图找到一种方法来仅扩展以下一个值:

.ui-grid > .row > [class*="thirteen wide"].column {width: @thirteenWide !important}

我只需要在 13 上扩展，而不是选择的其余部分。一个简单的 &extent(thirteen all) 在这种情况下不起作用，因为 thirteen 没有在任何地方声明，而是只用于创建这个特定的选择器。

Answer 1

简而言之，不，extend 无法针对属性选择器内部的特定元素/实体。 Extend 始终将任何属性选择器视为一个不可或缺的元素(即作为一个整体)，甚至无需尝试理解它的含义。所以在这种情况下你能做的最好的事情是:

.ui-grid > .row > [class*="thirteen wide"].column {
    width: foo;
}

[class*="my-id wide"]:extend([class*="thirteen wide"] all) {}
// or:
.my-id:extend([class*="thirteen wide"] all) {}
// etc.

Demo.