web@css引入方式，基本选择器,3大特性,高效运行

2023-11-09 00:37•css•阅读 4301

4.高效的css

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

1.不要再ID选择器前使用标签名

解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

2.不要在类选择器前使用标签名

解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

3.尽量少使用层级关系；

#divclass p.colclass{color:red;}改为 .colclass{color:red;}

4.使用类选择器代替层级关系（如上）推存使用类选择器

1.引入方式

行间式

内联式

<style>

2.基本选择器

*{}

#id{}

div{}

.class{}

</style>

外联式

3.特性--继承、优先级和层叠

继承：即子类元素继承父类的样式;（例如:父级设置font-size=16px，子会继承）

优先级：相同样式-哪个的选择器权重高显示哪个比较权重;

层叠：后者和前者：相同部分-后者覆盖前者不同两者叠加

CSS优先级：是由四个级别和各级别的出现次数决定的。

　　四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

　　优先级的算法：

　　每个规则对应一个初始"四位数"：0、0、0、0

　　若是行内选择符，则加1、0、0、0

　　若是 ID选择符，则加0、1、0、0

　　若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

　　若是元素(标签)选择符/伪元素选择符，则分别加0、0、0、1

需注意的：

　　①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;

　　②、优先级相同时，则采用就近原则，选择最后出现的样式;

　　③、继承得来的属性，其优先级最低;

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性