一、什么是 CSS 选择器CSS 选择器Selector是 CSS 最核心的基础作用是 精准选中页面中的 HTML 元素并为其设置样式。简单来说选择器就是“找谁”CSS 属性就是“改什么样式”。只有选择器写得精准我们的样式才能精准生效不会出现样式冲突、覆盖、找不到元素的问题。二、CSS选择器分类总览常用选择器可以分为四大类基础选择器标签、类、id、通配符层级选择器后代、子代、兄弟伪类选择器状态选择悬浮、点击、聚焦等伪元素选择器创建虚拟元素改样式三、基础选择器最常用、必掌握通配符选择器 *选中页面所有标签一般用于全局初始化样式。{margin: 0;padding: 0;box-sizing: border-box;}特点优先级最低作用范围最大。标签选择器元素选择器根据 HTML 标签名称选中所有同类标签。p {color: #333;font-size: 14px;}作用统一页面所有 p 标签样式。类选择器 .class开发最常用通过 class 类名选中元素可以复用、可以多个标签共用。.box {width: 100px;height: 100px;background: pink;}特点灵活、可复用、优先级中等是企业开发首选。ID 选择器 #id通过 id 选中唯一元素页面中 id 必须唯一。#title {color: red;font-weight: bold;}特点优先级最高一般不用于写样式多用于 JS 获取元素。四、层级选择器布局必备后代选择器 空格选中父元素里 所有层级 的指定子元素孙子、重孙子都生效。.wrap p {color: blue;}子代选择器 只选中 直接子元素孙子元素不生效。.wrap p {color: green;}相邻兄弟选择器 选中 紧挨着的下一个兄弟元素。.box p {color: orange;}通用兄弟选择器 ~选中 所有同级后续兄弟元素。.box ~ p {color: #666;}五、伪类选择器状态交互必备伪类选择器用于选中元素的某种状态常用于 hover 悬浮、点击、聚焦等交互。悬浮状态 :hover鼠标悬浮在元素上时触发。button:hover {background: #409eff;color: #fff;}点击状态 :active鼠标按下瞬间触发。button:active {transform: scale(0.95);}聚焦状态 :focus输入框获取光标时触发。input:focus {border-color: #409eff;outline: none;}超链接伪类LVHA 顺序a:link { /* 未访问/ }a:visited { /已访问/ }a:hover { /悬浮/ }a:active { /点击瞬间 */ }结构伪类常用:first-child 第一个子元素:last-child 最后一个子元素:nth-child(n) 第 n 个子元素li:first-child {color: red;}li:last-child {color: green;}li:nth-child(2) {color: blue;}六、伪元素选择器美化神器伪元素可以创建虚拟行内元素用来做装饰、图标、划线不用增加 HTML 结构。注意伪元素必须加 content 属性::before 前置元素::after 后置元素.text::before {content: “★”;color: red;}.text::after {content: “”;display: inline-block;width: 20px;height: 2px;background: #000;}七、选择器优先级重中之重当多个选择器同时作用一个元素时优先级高的样式生效。优先级从低到高通配符 * 标签选择器 类选择器 ID选择器 行内样式 !important八、总结基础选择器通配符、标签、类、ID是写样式的基础层级选择器用于精准选中父子、兄弟结构元素解决布局样式冲突伪类选择器实现悬浮、点击、聚焦、结构筛选等交互效果伪元素选择器纯 CSS 实现装饰效果精简 HTML 结构优先级规则解决样式覆盖、样式不生效问题。CSS 选择器是前端一切样式的根基熟练掌握选择器可以轻松实现任意页面布局与美化是前端入门必须吃透的知识点