Css选择器的优先级

1.常用选择器

1.元素选择器
语法:标记名{ }
p{
color:red;
} //为所有的p元素设置样式。

2.ID选择器
语法:#id{ } //id值唯一,不能重复
#box{} //为id为box的元素设置样式。

3.类选择器
语法:.class{}
.box{} //为所有的class值为box的元素设置样式。

4.分组选择器(也叫并集选择器)
语法:选择器1,选择器2,选择器N{}
#box1,.box2,p{} //为为id为box1,class为box2和p的元素共同设置样式。

5.交集选择器
语法:选择器1选择器2选择器3{}
p.box1{} //为class值为box1的p元素设置样式,注意id为唯一值,一般id选择器不会存在于交集选择器中(没必要)。

6.后代选择器
语法:选择器1 选择器2{}
p .box{} //选中指定祖先元素p的指定后代.box。

7.子元素选择器
语法:父元素>子元素{}
p>.box{} //选中制定父元素p的制定子元素。box。注意与后代元素选择器的区别

8.伪类选择器
伪类可以用来表示一些特殊的状态:
:link - 未访问过的超链接。
:visited - 已访问过的超链接。
:hover - 鼠标移入的元素。
:active - 正在点击的元素。
由于选择器优先级的问题,给超链接a设置伪类时,需要注意他们的顺序,一般的顺序是:
love hate 可以看着(喜欢和爱情)方便记忆
:link>:visited>:hover>:active

选择器的优先级
为同一个元素设置多个样式时,此时哪个样式生效由选择器的优先级确定:

选择器的优先级(权重):
在这里插入图片描述
当一个选择器中含有多个选择器时,需要将所有的选择器的优先级进行相加,然后再进行比较,优先级高的优先显示,选择器的计算不会超过其最大的数量级(10个id选择器的优先级不能达到1000)
分组选择器(并集选择器)的优先级单独计算,不会相加。
样式后面加!important,该样式获取最高优先级,内联样式不能加!important属性。
样式相同的谁在下面执行谁(样式的覆盖)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值