css - LESS CSS - 选择与其父级具有相同类的子级

Question

今天刚开始使用LESS...有一个我想弄清楚的问题。
有没有办法将样式应用于与其父 UL 具有相同类名的 LI，而无需事先知道该类名是什么？

例如，这里有一些 HTML：

<ul class="random-classname">
    <li class="foo">foo</li>
    <li class="random-classname">Select Me!</li>
    <li class="bar">bar</li>
</ul>

我想为第二个元素应用背景颜色，而不在 CSS 中使用特定的类名。

score 2 · Accepted Answer

这仅在一个非常特殊的用例中回答您的问题，我怀疑这不完全是您的用例（因为它仍然需要将类名放入 css 中，它只允许程序员可能让另一个分配它）。我在这里提供它只是因为其他人可能会觉得有用。

如果场景是在编译时知道“随机”名称，则可以将类名设置为变量，然后像这样处理：

@randomName: random-classname; //set at compile time

.@{randomName} {
  straight-property: value;
  & > & {
    nested-property: value;
  }
}

这会产生：

.random-classname {
  straight-property: value;
}
.random-classname > .random-classname {
  nested-property: value;
}

如果您正在构建某种类型的框架，或者在其他阶段通过 php 从用户输入动态设置变量，则上述内容可能很有用。但我相信你希望在你的实际输出CSS 中有一些“通用”解决方案，这（正如评论指出的那样）目前是不可能的，而且正如他们也指出的那样，在这种情况下，javascript 是你最好的选择。

score -1 · Accepted Answer

你多虑了。仅使用选择器.random-classname，无论是在 LESS 还是 CSS 中，都将选择uland li...

2 回答 2