请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 204|回复: 10

[css] CSS的优先级特性Specificity

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-27 23:17:47 | 显示全部楼层 |阅读模式

它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。

选择器一样的情况下后面的会覆盖前面的属性。比如:

p { color: red; }

p { color: blue; }

p元素的元素将是蓝色,因为遵循后面的规则。

然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:

div p { color: red; }

p { color: blue; }

也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。

一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。

p的特性是1(一个html选择器)

div p的特性是2(两个html选择器)

.tree的特性是10(1个class选择器)

div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)

#baobab的特性是100(1个ID选择器)

body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)

按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。


回复

使用道具 举报

0

主题

942

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2016-3-9 11:56:54 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

7

主题

832

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2016-3-13 18:58:16 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

8

主题

1005

帖子

88

积分

注册会员

Rank: 2

积分
88
发表于 2016-3-17 22:38:11 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

1

主题

886

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-18 19:59:16 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-22 11:40:48 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

0

主题

94

帖子

201

积分

中级会员

Rank: 3Rank: 3

积分
201
发表于 2016-3-23 08:52:11 | 显示全部楼层
楼主,太爱你了。
回复 支持 反对

使用道具 举报

0

主题

841

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-7-13 09:13:36 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

2

主题

945

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2017-4-28 17:59:30 | 显示全部楼层
学习贵在坚持哦
回复 支持 反对

使用道具 举报

0

主题

854

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2018-3-1 10:16:20 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:00 , Processed in 0.236121 second(s), 41 queries .

快速回复 返回顶部 返回列表