[CSS]CSS选择符有哪些？CSS中哪些属性可以继承？优先级算法如何计算？

素颜马尾好姑娘i 2022-11-26 06:57 221阅读 0赞

一、CSS选择符有哪些？

id   	#
    class 	.
    标签   	div p 
    相邻   	ul+div
    子     	ul>li
    后     	ul li
    通配   	*
    属性   	a[href='xxx']
    伪类   	a:after  a:hover...

二、CSS中哪些属性可以继承？  
答常见的color 、 font-size即可  
三、优先级算法如何计算？  
**!important > 行内样式 > id> class > 元素和伪元素>通配选择器**\*

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

*  行间样式的特殊性是1,0,0,0
 *  ID选择器的特殊性值，加0,1,0,0。
 *  类选择器、属性选择器或伪类，加0,0,1,0。
 *  元素和伪元素，加0,0,0,1。
 *  通配选择器\*对特殊性没有贡献，即0,0,0,0。
 *  最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。  
    选择器组合后的特殊性值按照加法计算  
    比如：

div a{ color: green;} /*特殊性值：0,0,0,2*/
    .demo a{ color: black;} /*特殊性值：0,0,1,1*/
    下方的权重大于上方

补充：关于a标签的伪类选择器优先级  
我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？

根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。