CSS 三大特性: 继承/优先级/叠层(后者会覆盖前者)
优先级排序:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div,h1,p)
- 相邻选择器(h1+p)
- 子选择器(ul < li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel="external"])
- 伪类选择器(a:hover,li:nth-child)
注意是两种个不同的排名
eg:
p{
color:red !important;
}
<p style="color:blue"></p>
所以会显示为red。
如何写出高效的css样式,高效就是让浏览器查找更少的标签来确定匹配元素,这样对web前端性能的优化有着极大的作用,此处承接上文
1.不要在id选择器前面加上标签名 :因为id是唯一的
2.不要在class选择器前面加上标签名:有必要再加,没必要就不加
3.尽量减少层级关系
4.尽量用类名代替层级关系
5.尽可能的使用具体的类别
注意浏览器对CSS选择器的解析是从右往左的,所以选择器的最右边的,又被称作关键选择器,它对选择器的效率起到关键作用,只要把握一点,越具体的选择器,越高效