问题背景
在前端开发中，我们经常会使用 :target 选择器来为当前页面的锚点设置样式。然而，在使用 LESS 预处理器时，有时候会发现 :target 选择器的效果不佳，导致样式无法正确应用。
例如，我们在 LESS 中定义了以下样式：
-- -------------------- ---- -------
---- -
- -
------ -----
------- -
------ -----
-
-------- -
------ -----
-
-
-希望点击导航栏中的链接时，当前链接的颜色会变成红色。但是，当我们点击链接后，发现颜色并没有变成红色，而是保持原来的颜色。
解决方法
要解决这个问题，我们需要了解 LESS 编译的原理。LESS 编译器会将 LESS 代码转换成 CSS 代码，但是在转换过程中，它并不会考虑页面中的锚点状态。因此，当我们在 LESS 中使用 :target 选择器时，它会被编译成普通的 CSS 选择器，而不是动态的 :target 选择器。
为了解决这个问题，我们可以使用 JavaScript 来动态地为当前页面的锚点添加一个类名，然后使用 LESS 中的类选择器来为它们设置样式。
例如，我们可以在页面中添加以下 JavaScript 代码：
var hash = window.location.hash.substr(1);
if (hash) {
document.getElementById(hash).classList.add('target');
}这段代码会获取当前页面的锚点，然后为它添加一个名为 "target" 的类名。接着，我们可以在 LESS 中使用 .target 类选择器来为它设置样式：
-- -------------------- ---- -------
---- -
- -
------ -----
------- -
------ -----
-
-------- -
------ -----
-
-
-这样，我们就可以正确地为当前页面的锚点设置样式了。
总结
在使用 LESS 预处理器时，我们有时候会发现 :target 选择器的效果不佳。这是因为 LESS 编译器并不会考虑页面中的锚点状态。为了解决这个问题，我们可以使用 JavaScript 来动态地为当前页面的锚点添加一个类名，然后使用 LESS 中的类选择器来为它们设置样式。这种方法不仅可以解决 LESS 中 :target 选择器的问题，还可以增强我们对页面中锚点状态的控制能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65de1fe71886fbafa4b71a2e