前端面试之 CSS 篇

一、CSS基础

1. CSS选择器及其优先级

| 选择器 | 格式 | 优先级权重 |
| — | — | — |—|
| id选择器 | #id | 100 |
| 类选择器 | .classname | 10 |
| 属性选择器 | a[ref=“eee”] | 10 |
| 伪类选择器 | li:last-child | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | li:after | 1 |
| 相邻兄弟选择器 | h1+p | 0 |
| 子选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |

对于选择器的优先级：

• 标签选择器、伪元素选择器：1；
• 类选择器、伪类选择器、属性选择器：10；
• id 选择器：100；
• 内联样式：1000；

注意事项：

• !important声明的样式的优先级最高；
• 如果优先级相同，则最后出现的样式生效；
• 继承得到的样式的优先级最低；
• 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，