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

CSS-选择器

View Post

CSS-选择器

一、全局选择器(注释单行快捷键)
*

image

二、标签选择器

image
(只要是标签都可以成为标签选择器
无论多深都能被选择上,但一旦选中控制的为所有此标签)

三、类(class)选择器
核心规则:class 首字符只能是字母 / 下划线 / 短横杠,后续可跟数字 / 字母 / 下划线 / 短横杠,禁止特殊符号和空格;
开发规范:优先小写 + 中线分隔 + 语义化命名(如.text-1122),适配蓝桥杯竞赛和企业开发;
延伸知识:id 命名规则和 class 基本一致,仅多了「页面内唯一」的要求。
下面是class的命名

image
下面是class选择器的调用
image

四、Id选择器

image
一个Id命名后,不可重复使用其名字
可以执行但在加入js后会出现错乱

五、合并选择器
如图所示
选择器名逗号隔开

image
⚠️选择器优先级
image

⚠️如果是相同选择器则是最后一个覆盖前面的

点击查看代码
.t1{color: aqua;}.t2{color: chocolate;}**/* 代码执行顺序是从上往下执行所以相同选择器下最后一个样式生效 */**<p class="t1 t2">yyyyyy</p>