2024年前端入门（十四）CSS基础4：优先原则(1)，Web前端上机面试题

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

div1

效果：文字是红色

如果css为原先顺序，先txt，再txt2，html文件中修改顺序class=“txt2 txt”，文字显示的依然是txt2的颜色

3.不同类型选择器，优先级：

通配符选择器 < 标签选择器 < 类型选择器class < id选择器

css文件：

.txt {

color: red;

}

.txt2 {

color:gray;

}

div {

color: green;

}

html文件：

div1

效果：为灰色

4.内外部合并，再按以上3种规则解析，_{合并是将内部样式加到外部样式的最下面}

合并是看加载完成的顺序，外部样式是异步加载的，可能会比较慢；

内部样式如果写在外部样式前面，先解析内部样式；

如果写在外部样式后面，且外部样式加载很慢（文件很大或不在本地），也有可能先解析内部样式，再解析外部样式

css文件：

.txt {

color: red;

}

.txt2 {

color:gray;

}

div {

color: green;

}

html文件：

div1

效果：为黄色

5.先解析内部外部，再解析内联样式

css文件不变：

.txt {

color: red;

}

.txt2 {

color:gray;

}

div {

color: green;

}

html文件：

div1

效果：粉色：

6.带有important字段的样式最后解析

css文件：

.txt {

color: red;

}

.txt2 {

color:gray;

}

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-oDL3VpNK-1715483176075)]

[外链图片转存中…(img-6kLqEi7Z-1715483176076)]

[外链图片转存中…(img-Ki5nGC97-1715483176076)]

[外链图片转存中…(img-7e3b8VTk-1715483176077)]