LESS CSS - 选择与父级具有相同类的子级答案

【问题标题】：LESS CSS - selecting a child with the same class as its parentLESS CSS - 选择与父级具有相同类的子级
【发布时间】：2013-07-10 07:07:39
【问题描述】：

今天刚开始使用 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 中使用特定的类名。

【问题讨论】：

否； CSS 不支持。
LESS 被编译成 CSS，它不能做任何 CSS 不能做的事情。
SLaks 是对的，LESS 必须在不知道 random-classname 部分的情况下生成 CSS 选择器 ul.random-classname li.random-classname。但是，您可以使用 Javascript 找到所有这些元素并向它们添加另一个类。如果您希望我发布 Javascript 解决方案，请告诉我（如果您使用 jQuery，也请告诉我）。
谢谢 zzzzBov，我需要那个关于现实的小提醒。
Paulpro - 是的，我将使用 jQuery。无需发布解决方案，我没事。

标签： css css-selectors less

【解决方案1】：

这只在一个非常特殊的用例中回答你的问题，我怀疑这不完全是你的用例（因为它仍然需要将类名放入 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 动态设置变量，上述内容可能很有用。但我相信您希望在您的实际 output CSS 中找到一些“通用”解决方案，这（正如 cmets 指出的那样）目前是不可能的，而且正如他们还指出的那样，javascript 是你最好的选择一个案例。

【讨论】：

【解决方案2】：

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

【讨论】：

如果“事先不知道该类名是什么”，您将如何做到这一点？
我一定是误会了。