干前端开发数年，踩过最多的坑，就是CSS选择器用错了。很多新手刚学，总把各种选择器记混，写样式要么生效不了，要么误改其他元素，加班调试到崩溃都是常事。
其实CSS选择器没那么复杂，不用死记硬背，记住常用的几个，结合实例练两次就吃透了。今天就掰扯掰扯，工作中真正能用得上、不鸡肋的选择器，全是干货。
最基础的就是元素选择器，说白了就是直接写HTML标签名，比如div、p、span、a。比如想让所有段落文字变灰色，直接写p { color: #666; }就行，简单粗暴，新手入门必学。但它有个短板，会选中页面所有对应标签，想单独改某一个就不行了。
然后是类选择器，用点“.”开头，这是工作中用得最多的，没有之一。给元素加个class，比如<div class="box">，然后写.box { ... }，想改哪个就给哪个加类，灵活得很。重点是一个类能复用，多个元素可以用同一个类，省不少重复代码，谁用谁知道。
id选择器，用“#”开头，和类选择器有点像，但差别大了去了。一个页面里，同一个id只能用一次，不能重复，不然浏览器会报错。一般用在唯一元素上，比如页面顶部的header、底部的footer，平时用得不如类选择器多，新手别乱用。
还有后代选择器，就是用空格隔开两个选择器，比如.box p，意思是选中class为box里面所有的p标签。这个超实用，比如卡片里的文字和页面其他文字样式不一样，用后代选择器就能精准控制，不用一个个加类。
子选择器和后代选择器容易搞混，用“>”隔开，比如.box > p，只选中box直接包含的p标签，孙子辈的p标签不算。我刚工作时总把这俩弄混，调试了半天没效果，尴尬到抠脚。
还有属性选择器，比如input[type="text"]，专门选中type为text的输入框，做表单样式时巨好用，不用给每个输入框加类，精准又省事。另外还有伪类选择器，比如hover，鼠标放上去样式变化，比如a:hover { color: red; }，做交互必用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 1. 元素选择器：所有p标签统一样式 */
p { margin: 10px 0; line-height: 1.5; }
/* 2. 类选择器：复用样式，给卡片统一样式 */
.card { width: 300px; padding: 20px; border: 1px solid #eee; border-radius: 8px; }
/* 3. id选择器：唯一元素，页面标题样式 */
#title { color: #333; font-size: 20px; font-weight: 600; }
/* 4. 后代选择器：卡片内所有span标签 */
.card span { color: #007fff; font-weight: 500; }
/* 5. 子选择器：卡片直接包含的h3标签 */
.card > h3 { color: #222; margin-bottom: 15px; }
/* 6. 属性选择器：type为text的输入框 */
input[type="text"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
/* 7. 伪类选择器：鼠标悬浮效果 */
.btn:hover { background: #007fff; color: #fff; cursor: pointer; }
.btn { padding: 8px 16px; border: none; border-radius: 4px; background: #eee; }
</style>
</head>
<body>
<h2 id="title">CSS选择器综合实例</h2>
<div class="card">
<h3>用户信息</h3>
<p>姓名：<span>前端程序员</span></p>
<input type="text" placeholder="请输入手机号">
<button class="btn">提交</button>
</div>
<p>备注：鼠标悬浮提交按钮查看效果</p>
</body>
</html>
评论