LESS 中如何控制样式的优先级-JavaScript中文网-JavaScript教程资源分享门户

什么是样式的优先级

在 CSS 中，有时候我们会遇到多个样式同时作用于同一个元素的情况，此时就需要判断样式的优先级，以决定哪一个样式会被应用于元素上。在 CSS 中，样式的优先级与其选择器有关。对于同一个元素可能会匹配到多个选择器，这时候就需要根据这些选择器的优先级来决定应用哪一个样式。

在计算样式优先级时，可以将选择器分为以下几类：

CSS 会按照上述选择器的特定顺序给样式分配优先级，选择器特定顺序如下：

在相同选择器类型的情况下，选择器出现的次数越多，优先级越高。比如 div#container 的优先级比 #container 高，因为前者包含了一个标签选择器和一个 ID 选择器。

了解样式的优先级之后，我们可以通过 LESS 来控制样式的优先级。

LESS 中的嵌套选择器可以让我们更方便地控制样式的优先级。嵌套选择器的写法如下：

.parent {
  .child {
    font-size: 14px;
  }
}

这样，生成的 CSS 代码会是：

.parent .child {
  font-size: 14px;
}

这样写可以让我们更方便地控制样式的优先级，比如：

.parent {
  font-size: 16px;
  
  .child {
    font-size: 14px;
  }
}

生成的 CSS 代码会是：

.parent {
  font-size: 16px;
}
.parent .child {
  font-size: 14px;
}

这时候，.child 元素的字体大小会被父元素 .parent 的字体大小覆盖掉。

LESS 中的父元素选择器 & 也能帮我们控制样式的优先级。它的作用是将父元素的选择器插入当前选择器中。

举个例子：

.btn {
  background-color: blue;

  &:hover {
    background-color: red;
  }
}

这样，生成的 CSS 代码会是：

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: red;
}

这样写也能帮我们控制样式的优先级，因为在 CSS 中，:hover 伪类的优先级是大于普通选择器的。

如果还需要更强的优先级，我们可以使用 !important 修饰符，比如：

.btn {
  background-color: blue !important;
}

这样，.btn 的 background-color 无论怎样都会是 blue。

通过 LESS，我们能够更方便地控制样式的优先级，具体来说，主要有以下几种方式：

掌握好这些技巧能够帮助我们更好地编写 CSS 样式，同时也有助于我们提升前端开发的效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64b1152b48841e9894d68727