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

Question

在 LESS 框架中编写 CSS 选择器时是否可以进行异常(exception)？

例子:

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

有没有一种方法可以编写一个影响 所有

实例的选择器， 那些包含 的实例除外？

我知道 LESS 实现了 Guards(就像 if/else 语句一样)，但实际上我不知道它们是否可以提供帮助，或者是否没有解决方案。

Answer 1

答案是“否”

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

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

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