面试官：说下CSS选择器优先级
前端面试中关于CSS选择器的问题三连：
- 说一下CSS的选择器有哪些
- 优先级是怎样的
- 权重计算方式
css选择器
CSS选择器包括行内样式、id选择器、class选择器、标签选择器，优先级依次降低，!important可用于优先级提升，比行内样式优先级还要高，权重的计算依次为1000,100,10,1，!important的优先级为正无穷。
CSS选择器类型
样式类型
行内样式：<style></style>
内联样式：<div style="color:red;">
外部样式：<link>或@import引入
选择器类型
id选择器、class选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器
权重计算规则
- 第一优先级：
!important会覆盖页面内任何位置的元素样式 - 1.内联样式，如
style="color: green"，权值为1000 - 2.ID选择器，如
#app，权值为0100 - 3.类、伪类、属性选择器，如
.foo, :first-child, div[class="foo"]，权值为0010 - 4.标签、伪元素选择器，如
div::first-line，权值为0001 - 5.通配符、子类选择器、兄弟选择器，如
*, >, +，权值为0000 - 6.继承的样式没有权值
比较规则
- 1.
1000 > 0100，从左向右逐个比较，前一级相等才能往后比较 - 2.无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较，面试的时候遇到优先级比较，答案往往是：
行内>id>class>元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了 - 3.权重相同的情况下，位于后面的样式会覆盖前面的样式
- 4.通配符、子选择器、兄弟选择器，虽然权重为
0000，但是优先于继承的样式
