在 LESS 中使用伪元素和伪类的技巧-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种动态样式语言，它可以帮助开发者更加轻松地编写 CSS，同时也提供了许多便利的特性。其中，使用 LESS 编写伪元素和伪类样式可以极大地减少代码量，提升前端开发效率。

伪类

在 LESS 中，我们可以使用伪类来精确地选择元素。与 CSS 相同，伪类以 ":" 开始。以下是几个 LESS 中常用的伪类及其用法。

:hover

:hover 用于指定当鼠标悬停在元素上时的样式：

a {
    color: red;
    &:hover {
        color: blue;
    }
}

上述代码中，当鼠标悬停在 a 标签上时，文字颜色会变为蓝色。

:active

:active 用于指定当元素被激活时的样式：

button {
    background-color: red;
    &:active {
        background-color: blue;
    }
}

上述代码中，当按钮被点击时，背景颜色会变为蓝色。

:nth-child

:nth-child 用于指定某个元素的子元素。它需要一个参数，即要指定的子元素位置，可以是数字、表达式或关键词。以下是几个例子：

ul li:nth-child(2n) {
    color: red;
}

上述代码中，偶数位置的 li 元素文字颜色是红色。

ul li:nth-child(2n+1) {
    color: red;
}

上述代码中，奇数位置的 li 元素文字颜色是红色。

ul li:nth-child(even) {
    color: red;
}

上述代码中，偶数位置的 li 元素文字颜色是红色。

:not

:not 用于排除某些元素。它需要一个参数，即要排除的元素选择器。以下是一个例子：

li:not(.selected) {
    color: red;
}

上述代码中，除了 class 为 selected 的 li 元素之外，其他 li 元素文字颜色都是红色。

伪元素

LESS 中的伪元素与伪类相似，也是以 "::" 开始。以下是几个 LESS 中常用的伪元素及其用法。

::before 和 ::after

::before 和 ::after 分别用于在元素前、后插入内容：

div::before {
    content: '这是插入的内容';
}

上述代码中，在 div 元素前插入了文本 "这是插入的内容"。

::first-letter 和 ::first-line

::first-letter 和 ::first-line 用于指定元素的第一个字母和第一行的样式：

p::first-letter {
    font-size: 200%;
}

p::first-line {
    color: blue;
}

上述代码中，p 元素的第一个字母字体大小是原来的两倍，第一行文字颜色是蓝色。

::selection

::selection 用于指定选中文本的样式：

p::selection {
    background-color: blue;
    color: white;
}

上述代码中，选中 p 元素中的文本时，背景色是蓝色，文字颜色是白色。

总结

在 LESS 中使用伪元素和伪类的技巧可以帮助开发者更加轻松地编写 CSS，减少代码量，提升开发效率。我们可以根据需要选择不同的伪元素和伪类来精确地控制元素样式，实现更加丰富的页面效果。

示例代码

// javascriptcn.com 代码示例
a {
    color: red;
    &:hover {
        color: blue;
    }
}

button {
    background-color: red;
    &:active {
        background-color: blue;
    }
}

ul li:nth-child(2n) {
    color: red;
}

li:not(.selected) {
    color: red;
}

div::before {
    content: '这是插入的内容';
}

p::first-letter {
    font-size: 200%;
}

p::first-line {
    color: blue;
}

p::selection {
    background-color: blue;
    color: white;
}

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d0f887d4982a6ebe8a2c3