记录第一次面试——广州凡科（一）
2019.7.18完善简历的我去投递之后，过了两天吧，终于迎来了第一次面试。广州凡科。
去的时候刚好那个园区时刻准备停电，所以电梯不能用，饶了一会才找到他们楼梯，爬楼面试……做卷子的时候就像考试一样慌张。
以下是笔试内容：
1.暖身的css题：文本一二输出的是什么颜色？
<div class="red blue">文本一</div>
<div class="blue red ">文本二</div>
.red{
color:red;
}
.blue{
color:blue;
}
（好的，回来review的时候，发现自己做错这道题！瞬间心如死灰了。不用期待什么offer了。还以为自己笔试题做得挺好的来着，只是面试不济而已。略略略）
正确答案：都是蓝色。
解析：这其中涉及到css的优先级 问题，为了全面，先来讲一讲html引入css样式的方法。
1.内联方式<div style="background: red"></div>
2.嵌入方式<head> <style> .content { background: red; } </style> </head>
3.链接方式<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
4.导入方式<style> @import url(style.css); </style>
比较链接方式和导入方式的不同：
link属于html，所以语句应该写在style标签之外。@import属于css，所以应该写在style标签第一行，否则无法正确被加载！
当html文件被加载时，link同时被加载，而@import则是页面全部加载完再被加载。所以比较推荐link方式
现在是正题：css优先级
规则1：选择器的优先级：!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
*（说明：属性选择器， 如 a[href="segmentfault.com"]{}。伪类选择器， 如 :hover{}。伪元素选择器， 如 ::before{}。标签选择器， 如 span{}。通配选择器， 如 {}）
以上这些选择器还可以用组合选择符进行组合：CSS 组合选择符 | 菜鸟教程
那么当我们遇到选择器嵌套复杂的样式应该怎么办呢？
规则2：计算选择器的数量
计算法则如下：
把优先级记成一个数组 0，0，0，0
每个id选择器数组第二位+1。即0，1，0，0
每个类选择器 、属性选择器、伪类选择器数组第三位+1。即0，0，1，0
每个标签选择器 、 伪元素选择器数组第四位+1。即0，0，0，1
不断相加，不可进为
例子：
h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
——后者胜出
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */
——前者胜出
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
——后者胜出
规则3：最近的祖先样式比其他祖先样式高级
<!-- 类名为 son 的 div 的 color 为*blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
规则4：当我们发现各种优先都一致的时候，并且样式进行了重定义，则比较样式的加载顺序 ！！！后加载的会覆盖先加载的！！！
这种规则就应用到我开头的所述的那种情况。
后加载的class blue的color覆盖了class red的color。所以文本一、文本二都是blue的。
（面试的小哥哥看到我答错了都没有纠正我，好感度-1，公司印象-1...）
后面还会有 记录第一次面试——广州凡科（二、三……），敬请期待
网友评论