LESS框架中的CSS选择器异常？答案

【问题标题】：CSS selectors exceptions in LESS framework?LESS框架中的CSS选择器异常？
【发布时间】：2013-09-05 01:06:47
【问题描述】：

在 LESS 框架中编写 CSS 选择器时是否可以产生异常？

例子：

<ul>
  <li>one</li>
  <li>two</li>
  <li><a href="#">three</a></li>
  <li><a href="#">four</a></li>
</ul>

有没有办法编写一个影响

我知道 LESS 实现了 Guards（其行为类似于 if/else 语句），但实际上我不知道它们是否可以提供帮助或者是否没有解决方案。

【问题讨论】：

这并不是一个很好的方法来做到这一点，因为它需要为您提供一个非本地选择器。您可能希望使用 JS 库为这些项目添加一个类，例如 api.jquery.com/has-selector

【解决方案1】：

答案是“不”

LESS，作为一个 CSS 预处理器有两个主要的事情可以阻止你想要做的事情。

作为 预处理器 在服务器端运行，它不知道页面的实际 HTML 结构（与在客户端运行的 javascript 不同）。即使您在实际版本中运行 LESS 客户端（通常不推荐），也需要额外的 javascript 工作才能使其真正了解 HTML 结构。所以 LESS 不能像 javascript 本身那样即时响应 HTML。
作为一个 CSS 预处理器，它最终只会从其代码中生成您可能在本机 CSS 中编写的内容。 Since there is currently no "parent selector" in CSS（这就是你真正要问的......如何选择 parent li 或不基于其 child a 元素），然后 LESS不能产生 CSS 本身不能做的事情。

因此，如果您可以控制 HTML，我建议在具有 a 或没有 li 的元素上放置一个类。如果它是动态的（因此直到运行时才知道），那么 javascript 本身（无论是通过 JQuery 之类的库还是其他方式）将是留给您的唯一可能的解决方案。

【讨论】：