刚学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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style p { color: #d36485; } .fruit { color: #432da5; } #p1 { color: #00ff6a; } /style /head body p idp1 classfruitdongdong/p p idp2 classfruit哈基米/p p idp3 classanimal羊蜜/p /body /html以上是我对三大选择器的了解和实战经验非常适合初学者们。现在让我们来看看结果吧。三、总结三大基本选择器是CSS的入门必修课也是你写好样式的基础。搞懂它们的定义、特点、优缺点和优先级你就能避开新手阶段80%的样式问题如果这篇博客帮到你了别忘了点赞收藏下次写样式踩坑的时候回来再看看