CSS选择器怎么用？标签类ID与后代伪类选择器入门实战

写网页离不开CSS，而CSS的核心就是“选择器”——它决定了你写的那条样式到底作用在哪些元素上。很多新手样式老是不生效，八成是选择器没写对。今天老陈用大白话把最常用的几种CSS选择器讲明白，配合小例子，新手也能一次看懂。

一、CSS选择器是干什么的

你可以把选择器理解成“点名”。CSS先靠选择器点出要修饰的元素，再把后面的样式（颜色、字号、间距）套上去。基本写法是：选择器加大括号，里面写样式声明。

p { color: red; }

上面这行意思就是：把所有p段落的文字变成红色。

二、4种最常用选择器

1. 标签选择器：按元素名称点名

直接用HTML标签名，比如p、h1、div。它会选中页面上所有同名标签，适合做全局统一风格。

h1 { font-size: 24px; }

2. 类选择器：按class点名，最常用

在HTML里写class=“box”，CSS里用点号.开头。一个类可以多处复用，最灵活，老陈日常九成样式都靠它。

.box { padding: 10px; border: 1px solid #ddd; }

3. ID选择器：按id点名，唯一

HTML里写id=“header”，CSS里用井号#开头。ID在一个页面应当唯一，一般用来定位某个特定区块，不建议大量复用。

#header { height: 60px; }

4. 后代选择器：选中里面的子孙

用空格隔开，表示“某元素里面的某元素”。比如只让导航里的链接变蓝，不影响别处。

nav a { color: blue; }

三、伪类选择器：根据状态点名

伪类用冒号开头，常用在交互状态。最典型的就是链接 hover（鼠标悬停）：

a:hover { color: orange; }

意思是鼠标移到链接上时变橙色。还有:first-child（第一个子元素）、:nth-child(2)（第2个）等，用来精确挑元素。

四、新手最容易踩的3个坑

• 优先级搞混：ID选择器权重高于类，类高于标签。写了p{color:red}又写.box{color:blue}，带box类的段落会是蓝色
• 类名写错或拼错：HTML里class=“content”，CSS写成.contentt，自然不生效
• 漏写符号：类前面忘打点.、ID忘打井号#，浏览器会当成标签名去找，匹配不到

老陈总结

CSS选择器就是给元素“点名”的工具，记住标签、类、ID、后代、伪类这五种，日常排版基本够用。老陈建议你现在就打开编辑器，新建一个html，写几个p和div，分别用.类、#ID、nav a去上色，亲眼看到效果印象最深。多选多练，选择器就不再是拦路虎。想系统学前端的，可以看我系统课程，或者评论区留言发链接给你。