CSS三大选择器终极对决！谁才是新手写样式的“最优解”？
刚学CSS的你，是不是总被样式不生效、莫名被覆盖搞到崩溃？今天用我所学到代码里的例子，一次性讲透最核心的3种选择器，从定义到优缺点，帮助你彻底搞懂它们。
一、三大选择器
1.标签选择器
定义：也叫元素选择器，直接用HTML标签名来选择所有同名元素，比如 p、div、span。
p { color: #d36485; }是最基础也是覆盖范围最广的选择器。
优点就是写起来很简单，直接写标签名就好了。缺点就是只要是同名的标签都会被选中，没有办法精准的捕捉到单个元素，所以他的灵活性差。
2.类选择器
定义：以 . 开头，后面跟类名，选中所有 class 属性等于该类名的元素。
.fruit { color: #432da5;是前端开发中最常用的选择器
优点：同一个类可以给很多个元素用，不用重复写代码。所以这个选择器的灵活性高，可以给不同元素加同一个类，也可以给同一个元素加多个类，也不会轻易被全局样式覆盖。
缺点：如果项目里类名起的很乱，就很容易出现类名的冲突，就会导致相互影响。
3.ID选择器
定义：以 # 开头，后面跟ID名，选中 id 属性等于该ID的元素。
#p1 { color: #00ff6a; }注意！一个页面里，ID必须是唯一的，不能重复！！！
优点：是三大选择器中优先级最高！权重也是最高的，样式几乎不会被其他基础选择器覆盖。并且它的定位精准。
缺点：不能重复使用，一个ID只能给一个元素用。
二、实战
上面都解释三大选择器的定义等等，想必大家心里都有个底了吧，接下来让我们进入实战。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三种基本选择器</title> <style> p { color: #d36485; } .fruit { color: #432da5; } #p1 { color: #00ff6a; } </style> </head> <body> <p id="p1" class="fruit">dongdong</p> <p id="p2" class="fruit">哈基米</p> <p id="p3" class="animal">羊蜜</p> </body> </html>以上是我对三大选择器的了解和实战经验，非常适合初学者们。现在让我们来看看结果吧。
三、总结
三大基本选择器是CSS的入门必修课，也是你写好样式的基础。搞懂它们的定义、特点、优缺点和优先级，你就能避开新手阶段80%的样式问题！如果这篇博客帮到你了，别忘了点赞收藏，下次写样式踩坑的时候，回来再看看！