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

本文详细介绍了CSS选择符的种类,包括通配选择器、元素选择器、类选择器等。同时,讨论了CSS中可以继承的属性,如color和font-size。还解析了CSS优先级算法,包括!important、行内样式、ID、类和元素的选择器优先级,并阐述了如何计算选择器的特殊性值。此外,文章还提及了a标签伪类选择器的优先级和声明顺序,遵循LVHA原则的原因。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值