当前位置：首页 > news >正文

CSS选择器学习笔记

news 2025/9/30 21:24:56

CSS选择器是前端开发的基础，它允许我们精确地选择并样式化HTML文档中的元素。下面我为你整理了一份详细的CSS选择器笔记，包含了基本用法、示例和优先级规则。

📘 CSS选择器全面学习笔记

一、基本选择器

基本选择器是CSS中最基础且最常用的选择器类型，它们通过元素名称、类名或ID来定位元素。

选择器类型	示例	描述
通用选择器	`* { margin: 0; }`	选择所有元素，常用于重置样式
元素选择器	`p { color: red; }`	选择所有指定标签元素
类选择器	`.intro { font-size: 20px; }`	选择class属性包含"intro"的所有元素
ID选择器	`#header { background: blue; }`	选择id属性为"header"的元素（ID应唯一）

二、组合与关系选择器

组合选择器通过多种方式组合基本选择器，以更精确地定位文档结构中的元素。

/* 多元素选择器 */
div, p { color: blue; } /* 同时选择所有<div>和<p>元素 *//* 后代选择器 */
article p { font-style: italic; } /* 选择<article>内部所有<p>元素（包括嵌套） *//* 子元素选择器 */
ul > li { list-style: square; } /* 仅选择<ul>的直接子元素<li> *//* 相邻兄弟选择器 */
h2 + p { font-weight: bold; } /* 选择紧跟在<h2>后的第一个<p>元素 *//* 通用兄弟选择器 */
h2 ~ p { color: #666; } /* 选择<h2>后面所有同级<p>元素 */

三、属性选择器

属性选择器通过元素的属性及属性值来定位元素，提供了更灵活的选择方式。

/* 存在属性选择 */
a[title] { color: purple; } /* 选择有title属性的<a>元素 *//* 精确属性值匹配 */
input[type="text"] { background: #eee; } /* 选择type属性为"text"的<input> *//* 部分属性值匹配 */
a[href^="https"] { color: green; } /* 选择href以"https"开头的所有链接 */
a[href$=".pdf"]::before { content: "📄 "; } /* 选择href以".pdf"结尾的链接 */
a[href*="example"] { font-weight: bold; } /* 选择href包含"example"的所有链接 *//* 空格分隔属性值匹配 */
div[class~="box"] { border: 1px solid; } /* 选择class包含"box"的<div>（如"box"、"big box"） */

四、伪类选择器

伪类选择器用于定义元素的特定状态，如鼠标悬停、获得焦点等交互状态。

4.1 交互伪类

a:link { color: blue; } /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; } /* 鼠标悬停状态 */
a:active { color: orange; } /* 元素被激活时（如点击） */
input:focus { border-color: blue; } /* 获得焦点的表单元素 */
input:disabled { background-color: #eee; } /* 被禁用的表单元素 */

4.2 结构伪类

li:first-child { font-weight: bold; } /* 父元素的第一个子元素 */
li:last-child { border-bottom: none; } /* 父元素的最后一个子元素 */
li:nth-child(odd) { background: #f5f5f5; } /* 奇数位子元素 */
li:nth-child(3n+1) { color: red; } /* 每3个元素中的第1个 */
div:empty { display: none; } /* 没有子元素的元素 */

五、伪元素选择器

伪元素选择器用于样式化元素的特定部分或在内容前后插入内容。

p::first-letter { font-size: 2em; font-weight: bold; 
} /* 选择元素的首字母 */p::first-line { font-style: italic; 
} /* 选择元素的首行 */.quote::before {content: """;
} /* 在元素内容前插入内容 */.quote::after {content: """;
} /* 在元素内容后插入内容 */::selection {background-color: yellow;color: black;
} /* 选择用户选中的文本 */

六、选择器优先级规则

当多个规则应用于同一个元素时，浏览器使用优先级(specificity)规则确定哪个样式生效。

6.1 优先级权重计算

优先级由四位数(a,b,c,d)表示，比较时从左到右逐级对比：

选择器类型	示例	权重表示	说明
行内样式	`style="color:red"`	1,0,0,0	直接在HTML元素上定义
ID选择器	`#content`	0,1,0,0	基于元素ID
类/属性/伪类	`.box`, `[type="text"]`, `:hover`	0,0,1,0	类、属性和伪类选择器
元素/伪元素	`p`, `::before`	0,0,0,1	元素名和伪元素
通用选择器	`*`	0,0,0,0	不影响优先级

6.2 优先级示例

p { color: black; } /* 权重: 0,0,0,1 */
.content { color: blue; } /* 权重: 0,0,1,0 */
#sidebar p { color: red; } /* 权重: 0,1,0,1 */
#sidebar .text p { color: purple; } /* 权重: 0,1,1,1 - 这个优先级最高 */