2024前端面试准备之CSS篇（一）

全文链接

1. CSS选择器的优先级是怎样的

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

计算示例：优先级由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• A 的值等于 1 的前提是存在内联样式, 否则 A = 0
• B 的值等于 ID选择器 出现的次数
• C 的值等于 类选择器 和 属性选择器和伪类出现的总次数
• D 的值等于 标签选择器和伪元素出现的总次数

2. link和@import的区别

• link属于XHTML标签，⽽**@import**是CSS提供的。
• ⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。
• import只在IE 5以上才能识别，⽽link是XHTML标签，⽆兼容问题。
• link⽅式的样式权重⾼于@import的权重。
• 使⽤dom控制样式时具有差别，当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是dom可以控制的。

3. 有哪些方式（CSS）可以隐藏页面元素

• opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
• visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
• overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
• z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了ÿ