LESS 中 CSS 选择器的嵌套与伪类的应用技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 选择器是必不可少的一部分。LESS 是一种 CSS 预处理器，它提供了更加灵活和强大的选择器语法，让我们可以更加方便地编写样式。本文将介绍 LESS 中 CSS 选择器的嵌套和伪类的应用技巧，帮助读者更好地掌握 LESS 的使用。

嵌套选择器

在 LESS 中，我们可以使用嵌套选择器来描述 HTML 元素的层级关系，从而更加方便地编写样式。例如，我们可以使用以下的 LESS 代码来描述一个列表：

ul {
  li {
    color: #333;
    &:hover {
      color: red;
    }
  }
}

上面的代码中，我们使用了嵌套选择器来描述列表元素的层级关系。在 LESS 中，我们可以使用 & 符号来表示当前选择器的父选择器。在上面的代码中，&:hover 表示当前选择器为 li:hover。

嵌套选择器不仅可以描述层级关系，还可以描述伪类和伪元素。例如，我们可以使用以下的 LESS 代码来描述一个带有箭头的按钮：

// javascriptcn.com 代码示例
.button {
  &::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #333;
    vertical-align: middle;
    margin-right: 5px;
  }
  &:hover::before {
    border-right-color: red;
  }
}

上面的代码中，我们使用了 &::before 来表示当前选择器为 .button::before。在 &:hover::before 中，我们使用了 & 符号来表示当前选择器为 .button:hover::before。

伪类选择器

伪类选择器是 CSS 中常用的一种选择器，它可以选择元素的特定状态。在 LESS 中，我们可以使用伪类选择器来更加方便地描述元素的状态。例如，我们可以使用以下的 LESS 代码来描述一个带有动画效果的按钮：

// javascriptcn.com 代码示例
.button {
  transition: all 0.3s ease;
  &:hover {
    background-color: #333;
    color: #fff;
  }
  &:active {
    transform: translateY(2px);
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

上面的代码中，我们使用了 &:hover、&:active 和 &:disabled 来分别表示按钮的鼠标悬停、鼠标按下和禁用状态。在 LESS 中，我们还可以使用 &:not 来表示元素的反状态。例如，我们可以使用以下的 LESS 代码来描述一个除第一个子元素外的所有子元素：

li {
  &:not(:first-child) {
    margin-top: 10px;
  }
}

上面的代码中，我们使用了 &:not(:first-child) 来表示除第一个子元素外的所有子元素。

总结

LESS 中的选择器语法提供了更加灵活和强大的样式编写方式。通过嵌套选择器和伪类选择器的应用，我们可以更加方便地描述 HTML 元素的层级关系和状态。在实际开发中，我们应该充分利用 LESS 的选择器语法，提高样式编写的效率和质量。

示例代码：https://codepen.io/pen/?template=xxrVrXr

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