CSS 选择器手册 | Less 选择器更香

CSS 选择器介绍

CSS 选择器用于指定 HTML 元素，以便为其添加样式。CSS 选择器有很多种，每种选择器都有自己独特的用途。

元素选择器

元素选择器是最基本的 CSS 选择器，它可以选中 HTML 文档中的所有元素。例如，下面的 CSS 选择器将为所有段落元素添加样式：

p {
  color: red;
}

通用选择器

通用选择器可以选中 HTML 文档中的所有元素，包括文本节点。例如，下面的 CSS 选择器将为所有元素添加样式：

* {
  color: red;
}

类选择器

类选择器可以选中具有指定类名的 HTML 元素。例如，下面的 CSS 选择器将为所有具有类名 “red” 的元素添加样式：

.red {
  color: red;
}

ID 选择器

ID 选择器可以选中具有指定 ID 的 HTML 元素。例如，下面的 CSS 选择器将为具有 ID “header” 的元素添加样式：

#header {
  color: red;
}

后代选择器

后代选择器可以选中父元素的子元素。例如，下面的 CSS 选择器将为所有是段落元素的子元素的元素添加样式：

p > * {
  color: red;
}

兄弟选择器

兄弟选择器可以选中与某个元素相邻的元素。例如，下面的 CSS 选择器将为所有是段落元素的兄弟元素的元素添加样式：

p + * {
  color: red;
}

相邻选择器

相邻选择器可以选中与某个元素相邻的元素，且这两个元素必须是相邻的元素。例如，下面的 CSS 选择器将为所有是段落元素的相邻元素的元素添加样式：

p ~ * {
  color: red;
}

属性选择器

属性选择器可以选中具有指定属性的 HTML 元素。例如，下面的 CSS 选择器将为所有具有属性 “href” 的元素添加样式：

[href] {
  color: red;
}

伪类选择器

伪类选择器可以选中处于特殊状态的 HTML 元素。例如，下面的 CSS 选择器将为所有处于鼠标悬停状态的元素添加样式：

:hover {
  color: red;
}

伪元素选择器

伪元素选择器可以选中 HTML 元素的某些部分。例如，下面的 CSS 选择器将为所有段落元素的第一行文本添加样式：

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

Less 选择器介绍

Less 是一种 CSS 预处理器，它可以帮助您创建更强大的 CSS 选择器。Less 选择器与 CSS 选择器非常相似，但是它有一些额外的特性。

嵌套选择器

Less 选择器支持嵌套选择器，这可以使您的 CSS 代码更易于阅读和维护。例如，下面的 Less 选择器将为所有具有类名 “red” 的元素的子元素添加样式：

.red {
  color: red;

  p {
    font-size: 16px;
  }
}

变量

Less 允许您定义变量，以便在您的 CSS 代码中重复使用。例如，您可以定义一个名为 “color-red” 的变量，并在您的 CSS 代码中使用它来为元素设置颜色。

@color-red: red;

.red {
  color: @color-red;
}

运算

Less 允许您在 CSS 代码中使用运算，以便创建更复杂的样式规则。例如，您可以使用运算来计算元素的宽度或高度。

.box {
  width: 100px + 20px;
  height: 100px - 20px;
}

结论

CSS 选择器和 Less 选择器可以帮助您为您的网页添加样式。CSS 选择器有很多种，每种选择器都有自己独特的用途。Less 选择器与 CSS 选择器非常相似，但是它有一些额外的特性，可以使您的 CSS 代码更易于阅读和维护。