LESS 是一种动态样式语言，它可以帮助开发者更加轻松地编写 CSS，同时也提供了许多便利的特性。其中，使用 LESS 编写伪元素和伪类样式可以极大地减少代码量，提升前端开发效率。
伪类
在 LESS 中，我们可以使用伪类来精确地选择元素。与 CSS 相同，伪类以 ":" 开始。以下是几个 LESS 中常用的伪类及其用法。
:hover
:hover 用于指定当鼠标悬停在元素上时的样式：
- -
------ ----
------- -
------ -----
-
-上述代码中，当鼠标悬停在 a 标签上时，文字颜色会变为蓝色。
:active
:active 用于指定当元素被激活时的样式：
------ -
----------------- ----
-------- -
----------------- -----
-
-上述代码中，当按钮被点击时，背景颜色会变为蓝色。
:nth-child
:nth-child 用于指定某个元素的子元素。它需要一个参数，即要指定的子元素位置，可以是数字、表达式或关键词。以下是几个例子：
-- ---------------- -
------ ----
-上述代码中，偶数位置的 li 元素文字颜色是红色。
-- ------------------ -
------ ----
-上述代码中，奇数位置的 li 元素文字颜色是红色。
-- ------------------ -
------ ----
-上述代码中，偶数位置的 li 元素文字颜色是红色。
:not
:not 用于排除某些元素。它需要一个参数，即要排除的元素选择器。以下是一个例子：
----------------- -
------ ----
-上述代码中，除了 class 为 selected 的 li 元素之外，其他 li 元素文字颜色都是红色。
伪元素
LESS 中的伪元素与伪类相似，也是以 "::" 开始。以下是几个 LESS 中常用的伪元素及其用法。
::before 和 ::after
::before 和 ::after 分别用于在元素前、后插入内容：
----------- -
-------- ----------
-上述代码中，在 div 元素前插入了文本 "这是插入的内容"。
::first-letter 和 ::first-line
::first-letter 和 ::first-line 用于指定元素的第一个字母和第一行的样式：
--------------- -
---------- -----
-
------------- -
------ -----
-上述代码中，p 元素的第一个字母字体大小是原来的两倍，第一行文字颜色是蓝色。
::selection
::selection 用于指定选中文本的样式：
------------ -
----------------- -----
------ ------
-上述代码中，选中 p 元素中的文本时，背景色是蓝色，文字颜色是白色。
总结
在 LESS 中使用伪元素和伪类的技巧可以帮助开发者更加轻松地编写 CSS，减少代码量，提升开发效率。我们可以根据需要选择不同的伪元素和伪类来精确地控制元素样式，实现更加丰富的页面效果。
示例代码
- -
------ ----
------- -
------ -----
-
-
------ -
----------------- ----
-------- -
----------------- -----
-
-
-- ---------------- -
------ ----
-
----------------- -
------ ----
-
----------- -
-------- ----------
-
--------------- -
---------- -----
-
------------- -
------ -----
-
------------ -
----------------- -----
------ ------
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d0f887d4982a6ebe8a2c3