CSS 选择器 (1) 核心语法规则、常见的选择器分类

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

CSS 选择器是 CSS 的核心灵魂，它告诉浏览器“把哪些元素选中，然后应用后面的样式”。掌握选择器，你就能精准、高效地控制页面任意元素。

 选择器 { 属性: 值; 属性: 值; }

核心组成：

选择器：告诉浏览器要选中哪些元素（可以是一个，也可以是多个）
声明块：用 {} 包裹，里面是一条条 “属性: 值;” 的声明

书写规范（强烈建议遵守）：

选择器与 { 之间加一个空格
每条声明独占一行
属性名后紧跟 :，值后紧跟 ;
最后一条声明可以不加 ;（但推荐统一加上）

示例：

GPT plus 代充 只需 145 /* 正确写法 */ h1 { color: #2c3e50; font-size: 32px; text-align: center; } /* 错误示范：缺少空格、声明没分号 */ h1{color:red;font-size:32px}

CSS 选择器主要分为以下 6 大类：

分类优先级权重代表选择器说明通用选择器 0 * 选中所有元素（慎用）元素（类型）选择器 1 div、 p、 h1、 a 按 HTML 标签名选择类选择器 10 .box、 .header 最常用，配合 class 属性 ID 选择器 100 #main、 #header 唯一性强，一个页面一个 ID 属性选择器 10 [type="text"]、 [href^="https"] 根据属性和属性值选择伪类选择器 10 :hover、 :nth-child(2)、 :is() 根据状态、位置、结构选择伪元素选择器 1 ::before、 ::after、 ::first-line 创建虚拟元素，常用于装饰

注意：优先级权重用于层叠冲突时决定谁生效（后面课程会详细讲）。

 p { color: #333; } /* 所有段落 */ h1, h2, h3 { font-weight: bold; } /* 多个标签用逗号分隔 */

GPT plus 代充 只需 145 .red { color: red; } .box { padding: 20px; border: 1px solid #ccc; } /* 一个元素可以有多个类 */

 #header { background: #2c3e50; color: white; } #main-content { max-width: 1200px; margin: 0 auto; }

GPT plus 代充 只需 145 * { margin: 0; padding: 0; box-sizing: border-box; }

注意：性能较差，生产环境慎用，通常只在重置样式时使用。

这些是真正提升你 CSS 水平的关键：

 /* 选中 .content 里面的所有 p 元素（无论嵌套多深） */ .content p { color: #666; }

GPT plus 代充 只需 145 /* 只选中 .menu 直接子元素 li（不包括孙子） */ .menu > li { display: inline-block; }

 /* 选中 h2 后面紧挨着的第一个 p */ h2 + p { margin-top: 10px; font-size: 18px; }

GPT plus 代充 只需 145 /* 选中 h2 后面所有兄弟 p 元素 */ h2 ~ p { color: #888; }

 /* 基础 */ input[type="text"] { width: 300px; } /* 常用匹配符 */ a[href^="https"] { color: green; } /* 以 https 开头 */ a[href$=".pdf"] { color: red; } /* 以 .pdf 结尾 */ a[href*="baidu"] { color: blue; } /* 包含 baidu */ img[alt] { border: 2px solid gold; } /* 只要有 alt 属性 */

GPT plus 代充 只需 145 a:hover { color: red; } li:nth-child(odd) { background: #f8f8f8; } input:focus { outline: 2px solid blue; } button:disabled { opacity: 0.5; cursor: not-allowed; } /* 结构伪类（非常常用） */ :first-child, :last-child, :nth-child(n), :nth-of-type()

 p::first-line { font-size: 1.2em; } p::first-letter { font-size: 3em; float: left; } .box::before { content: "★"; color: gold; margin-right: 8px; } .box::after { content: ""; display: block; clear: both; }

ID > 类/属性/伪类 > 元素/伪元素

具体权重计算规则（后面第 2 课会详细拆解）：

ID 选择器：100
类、属性、伪类：10
元素、伪元素：1
通用选择器：0
!important：直接最高（慎用）

CSS 选择器 = 选中元素 + 应用样式
最常用：元素、类、ID、后代、子选择器
进阶必会：属性选择器、伪类、伪元素、组合选择器
书写时注意空格、逗号、冒号、分号规范
优先使用 类选择器，少用 ID 和 *

课后练习（建议立即动手）：

用类选择器给所有按钮加上统一的圆角和阴影
用后代 + 子选择器实现导航栏（ul > li > a）
用属性选择器选中所有外部链接并加上图标
用 :nth-child 实现表格隔行变色
用 ::before 和 ::after 给标题加上装饰线

下一课预告：《CSS 选择器 (2)：优先级详解 + 层叠规则 + 现代选择器（:is、:where、:has）》

需要我立即补充：

CSS 选择器 (1) 核心语法规则、常见的选择器分类

相关推荐