CSS选择器入门与实战指南

想精准控制网页元素样式？本文为你详解CSS选择器！CSS选择器是网页样式设计的核心，它能精确地将样式应用到指定的HTML元素上。本文将带你深入了解CSS选择器的使用方法，包括基础的**元素选择器**、灵活的**类选择器**和**ID选择器**，以及强大的**属性选择器**、**后代与子选择器**和**伪类选择器**。掌握这些选择器，你就能轻松通过标签名、class、id、属性、结构关系和状态来匹配元素，实现各种各样的网页效果。无论你是CSS新手还是有一定经验的开发者，都能从本文中受益，提升你的网页样式控制能力。快来学习吧！

CSS选择器用于精准控制网页元素样式，包括元素选择器、类选择器、ID选择器、属性选择器、后代与子选择器、伪类选择器及组合选择器，通过标签名、class、id、属性、结构关系和状态匹配元素，实现灵活的样式应用。

CSS选择器是控制网页样式的核心工具，它决定了哪些HTML元素会应用特定的CSS规则。理解并掌握选择器的使用方法，是学习CSS的基础。下面详细介绍常用CSS选择器及其用法。

1. 元素选择器（标签选择器）

元素选择器通过HTML标签名称来选中元素，是最基础的选择器类型。

例如：

css

p {
  color: blue;
}

div {
  font-size: 16px;
}

上述代码会让所有 p 标签文字变为蓝色，所有 div 标签字体大小为16px。

2. 类选择器（class选择器）

类选择器以点号（.）开头，用于选中具有指定class属性的元素，可被多个元素复用。

例如：

HTML:

这是一段高亮文字

CSS:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

所有带有 class="highlight" 的元素都会拥有黄色背景和加粗字体。

3. ID选择器

ID选择器以井号（#）开头，用于选中具有特定id属性的唯一元素。一个页面中id应唯一。

例如：

HTML:

CSS:

#header {
  height: 80px;
  border-bottom: 1px solid #ccc;
}

该样式只作用于id为 header 的元素。

4. 属性选择器

属性选择器通过元素的属性或属性值来匹配元素，语法为[属性]或[属性=值]。

常见写法包括：

• [type] —— 有type属性的元素
• [type="text"] —— type属性等于text的元素
• [href*="example"] —— href包含example的链接
• [class^="btn"] —— class以btn开头的元素

示例：

input[type="password"] {
  border: 2px solid red;
}

所有密码输入框都会显示红色边框。

5. 后代选择器与子选择器

用于选中嵌套结构中的特定元素。

• 后代选择器：用空格分隔，选中某元素内部的所有指定后代。
  例如：div p 选中所有在div内的p元素。
• 子选择器：用 > 符号连接，仅选中直接子元素。
  例如：ul > li 只选中ul的直接li子项，不包括嵌套li。

6. 伪类选择器

伪类用于定义元素的特殊状态，以冒号（:）开头。

常见伪类：

• :hover —— 鼠标悬停时
• :focus —— 元素获得焦点时（如输入框）
• :first-child —— 父元素的第一个子元素
• :nth-child(n) —— 第n个子元素，支持公式如2n+1
• :not(选择器) —— 排除符合选择器的元素

示例：

a:hover {
  color: orange;
}

鼠标移到链接上时颜色变为橙色。

7. 组合选择器

多个选择器可以组合使用，提高精确度。

• .box.highlight —— 同时拥有box和highlight两个class的元素
• p#intro —— id为intro的p标签
• div + p —— 紧接在div后的第一个p元素（相邻兄弟选择器）
• div ~ p —— div之后的所有同级p元素（通用兄弟选择器）

基本上就这些。掌握这些基础选择器，就能精准控制页面中任意元素的样式。实际开发中常结合多种选择器使用，建议多练习嵌套与优先级的理解。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~