css - LESS 框架中的 CSS 选择器异常？

Question

在LESS框架中编写CSS选择器时是否可能出现异常？

例子：

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

有没有办法编写一个影响所有<li> 实例的选择器，除了那些包含 <a> 的实例？

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

score 1 · Accepted Answer

答案是不”

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

作为在服务器端运行的预处理器，它不知道页面的实际 HTML 结构（与在客户端运行的 javascript 不同）。即使您在实际版本中运行 LESS 客户端（通常不推荐），也需要额外的 javascript 工作才能使其真正了解 HTML 结构。所以 LESS 不能像 javascript 本身那样即时响应 HTML。
作为一个CSS预处理器，它最终只会从它的代码中生成你可能用原生 CSS 编写的内容。由于目前在 CSS 中没有“父选择器”（这是您真正要问的......如何选择父 li元素或不基于其子 a元素），那么 LESS 不能产生 CSS 本身无法做到的东西。

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