返回

掌握 CSS 常用选择器，让网页设计得心应手

前端

在网页设计的世界中，CSS（层叠样式表）可谓是至关重要的基石，它赋予了 HTML 元素外观和风格。而选择器则是 CSS 中的关键概念，它决定了哪部分 HTML 元素将受到样式的影响。掌握常用选择器，对于网页开发者来说至关重要，能够显著提升设计效率。

本文将深入探讨 CSS 常用选择器，逐一剖析其作用和使用方法，帮助您快速入门，在网页设计中游刃有余。

标签选择器

标签选择器是最基本的 CSS 选择器，它根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。其格式如下：

tag-name {
  property: value;
}

例如：要设置所有段落（<p> 标签）的字体颜色为红色，可以使用以下 CSS 代码：

p {
  color: red;
}

类选择器

类选择器用于选择带有指定类名（以"."开头）的元素。其格式如下：

.class-name {
  property: value;
}

例如：要设置所有带有 "header" 类名的元素的背景颜色为蓝色，可以使用以下 CSS 代码：

.header {
  background-color: blue;
}

ID 选择器

ID 选择器用于选择带有指定 ID（以 "#"开头）的唯一元素。与类选择器不同，ID 必须是唯一的，且只能用于一个元素。其格式如下：

#id-name {
  property: value;
}

例如：要设置带有 ID 为 "main-content" 的元素的边框，可以使用以下 CSS 代码：

#main-content {
  border: 1px solid black;
}

通用选择器

通用选择器（"*"）用于选择所有元素，无论其标签名称、类名或 ID 如何。它通常用于设置全局样式，例如：

* {
  font-family: Arial;
}

后代选择器

后代选择器用于选择特定祖先元素下的所有后代元素。其格式如下：

ancestor-selector descendant-selector {
  property: value;
}

例如：要设置所有 <div> 元素下所有 <p> 元素的字体大小为 16px，可以使用以下 CSS 代码：

div p {
  font-size: 16px;
}

相邻兄弟选择器

相邻兄弟选择器（"~"）用于选择紧邻在特定元素之后的相邻兄弟元素。其格式如下：

selector1 ~ selector2 {
  property: value;
}

例如：要设置所有 <h1> 元素之后的 <p> 元素的文本颜色为蓝色，可以使用以下 CSS 代码：

h1 ~ p {
  color: blue;
}

属性选择器

属性选择器用于选择具有特定属性和值的元素。其格式如下：

[attribute-name="attribute-value"] {
  property: value;
}

例如：要设置所有带有 "disabled" 属性的输入元素（<input> 标签）的背景颜色为灰色，可以使用以下 CSS 代码：

input[disabled] {
  background-color: gray;
}

伪类选择器

伪类选择器用于选择处于特定状态的元素，例如：

  • :hover：鼠标悬停在元素上时
  • :active：单击元素时
  • :focus：元素获得焦点时

例如：要设置所有带有 "link" 类名的链接在鼠标悬停时显示下划线，可以使用以下 CSS 代码：

a.link:hover {
  text-decoration: underline;
}