当前位置：首页 > news >正文

CSS三大选择器终极对决！谁才是新手写样式的“最优解”？

news 2026/7/5 2:52:22

刚学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>

以上是我对三大选择器的了解和实战经验，非常适合初学者们。现在让我们来看看结果吧。