LESS 中的伪类选择器详解-FunTeaLearn Online Web Tutorials

LESS 是一种层叠样式表（CSS）预处理器，它为 CSS 提供了许多有用的扩展，其中包括一些强大的选择器，如伪类选择器。本文将详细介绍 LESS 中的伪类选择器，并提供实际示例来帮助您更好地理解它们的使用。

什么是伪类选择器？

伪类选择器是一种用于选择 HTML 元素的处理程序，它定义了选择 HTML 元素的各种状态和行为。通俗点说，伪类选择器可以让你在特定情况下为元素定义样式，而不需要通过添加额外的类来进行标记。

在 CSS 中，最常用的伪类选择器是 :hover，它定义了鼠标悬停在一个元素上时的样式。其他常见的伪类选择器包括 :active（当用户点击元素时）、:focus（当元素获得焦点时）和 :visited（已访问链接的状态）。

但是，LESS 支持一些比 CSS 更多的伪类选择器，这些选择器可以帮助你更方便地为元素定义样式。

LESS 支持的伪类选择器

以下是 LESS 支持的一些伪类选择器：

`:first-child`

选择元素是其父元素的第一个子元素时。

li:first-child {
  color: red;
}

`:last-child`

选择元素是其父元素的最后一个子元素时。

li:last-child {
  color: blue;
}

`:nth-child`

选择元素是其父元素的特定子元素时。您可以通过以下方式指定要选择的元素：

:nth-child(n)：选择父元素中的第 n 个子元素（n 是正整数）。
:nth-child(2n)：选择父元素中的第偶数个子元素。
:nth-child(2n+1)：选择父元素中的第奇数个子元素。
:nth-child(-n+3)：选择父元素中的前三个子元素。

tr:nth-child(2n) {
  background-color: #eee;
}

`:not`

选择除了指定元素以外的所有元素。

li:not(.active) {
  color: gray;
}

`:empty`

选择没有任何子元素的元素。

div:empty {
  border: 1px dashed blue;
}

`:checked`

选择被选中的单选框或复选框。

input[type="checkbox"]:checked + label {
  background-color: #f00;
}

`:enabled`

选择启用的表单控件。

input:enabled {
  background-color: #fff;
}

`:disabled`

选择禁用的表单控件。

input:disabled {
  background-color: #eee;
}

`:target`

选择当前 URL 中的锚点。

#section1:target {
  background-color: yellow;
}

`:root`

选择文档的根元素，通常是 <html> 元素。

:root {
  font-size: 16px;
}

以上是 LESS 中一些常用的伪类选择器，当然还有一些其他选择器，本文不会赘述，读者可以自行查阅官方文档。

总结

LESS 中的伪类选择器为开发者提供了更多的选择和便利，它们可以用于为特定的 HTML 元素定义更细粒度的样式，而不需要添加额外的类或 ID。

了解并熟练掌握 LESS 中的伪类选择器，可以帮助您更好地理解 CSS 的选择器，以及如何最佳地利用它们。这也是提高前端开发技能的一条重要途径。

示例代码

以下是我们在本文中介绍的一些实际示例代码，希望对您有所帮助。

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ----------- ---------------
  -------
    ----- -
      ---------- -----
    -
    -------------- -
      ------ ----
    -
    ------------- -
      ------ -----
    -
    ---------------- -
      ----------------- -----
    -
    --------------- -
      ------ -----
    -
    --------- -
      ------- --- ------ -----
    -
    ------------------------------ - ----- -
      ----------------- -----
    -
    ------------- -
      ----------------- -----
    -
    -------------- -
      ----------------- -----
    -
    ---------------- -
      ----------------- -------
    -
  --------
-------
------
  ----
    -------- ------
    --- ------------------- ------
    -------- ------
  -----
  -------
    ----------- -- ------ ------------- -- ------ -----------
    ----------- -- ------ ------------- -- ------ -----------
    ----------- -- ------ ------------- -- ------ -----------
  --------
  ----
    -------- ------
    -------- ------
    -------- ------
  -----
  ---------- ---------
  -------- ----- ------------- -----------------
  ------
    ---
      ------ --------------- ----------- ------------- ---------------
      ------ --------------------- ---------
    ----
    ---
      ------ --------------- ----------- ------------- -------------- --------
      ------ --------------------- ---------
    ----
    ---
      ------ ----------- ------------
    ----
    ---
      ------ ----------- ------------ ---------
    ----
  -------
  ---- --------------------- -------
  ---- --------------------- -------
  ---- --------------------- -------
-------
-------

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649651bc48841e989435891f

LESS 中的伪类选择器详解