永发信息网

当CSS样式发生冲突时,浏览器显示样式格式的依据是什么?

答案:1  悬赏:50  手机版
解决时间 2021-02-21 21:55
当CSS样式发生冲突时,浏览器显示样式格式的依据是什么?
最佳答案
CSS样式发生冲突时
浏览器显示样式格式的依据CSS优先级规则来显示数据。

优先级的排序
类=10
ID=100
标签=1
!important=最大。
当机别数值一样事,后定义的优先(即近者优先),加上!important最优先。

数值越大 约优先。
以下事引用

引用文字--------------------------------------
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。 中国教程网--个人空间;
统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表:

H1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:11
P.bright EM.dark {color:brown;} 特性值为:22
#id316 {color:yellow} 特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。
-------------------------------------------------------------------------

可能不太好理解,按照上面的权重顺序,先统计ID,再统计CLASS,再统计HTML标记。即:

-------------------------------------------------------------------------
tH1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:1+1=2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:10+1=11
P.bright EM.dark {color:brown;} 特性值为:10+10+1+1=22
#id316 {color:yellow} 特性值为:100
-------------------------------------------------------------------------

可以看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了继承的权重为0。

文章中提到一个小技巧:

---------------------------------引用文字---------------------------------
如果想让H1始终为黑色,而EM文字在其他情况下红色,那么下面的样式表设置就是一个很好的方法:

H1,H1 EM {color:black;} 特性值为:1,2
EM {color:red;} 特性值为:1

给定这个规则后,除在H1元素内的任何EM文字就都是红色,而H1内的EM文字仍旧为黑色,由于其选择符分组,在第一条规则中就有两条有效的规则(一条是对H1的,另一条是对H1 EM的)也就有两个特性值——每条规则一个。
-------------------------------------------------------------------------

这个技巧很有意思,HTML是这样的:

-------------------------------HTML--------------------------------------
黑色的H1黑色的EM
红色的EM
-------------------------------------------------------------------------

也许你会说是不是跟上面的CSS样式顺序有关系呢?可以试试改成:

---------------------------------改后样式--------------------------------
EM {color:red;} 特性值为:1
H1,H1 EM {color:black;} 特性值为:1,2
-------------------------------------------------------------------------

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写样式时是很有帮助的,比如我们可以在定义列表的时候用到:

-------------------------------------------------------------------------
ul{color:red;}
ul li{6jGuestul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;}
-------------------------------------------------------------------------

这样就可以在不用增加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
工商行政管理服务厅怎么去啊,有知道地址的么
独一无二的名字,叫莫什么好听
北环路/立业路(路口)在哪里啊,我有事要去这
我被这个故事深深地感动,我相信大家也是如此
成都冬天冷不冷?
浙江工商职业技术学院地址在什么地方,想过去
如该患者1周后复查肌酐467μmol/L,则需与下
华帝标准专卖店NO.赣132我想知道这个在什么地
最近迷上了个游戏,可以通过邀请好友注册赚奖
宫本武藏哪个皮肤好.感觉鬼武者太丑
【关于江南的诗句】描写江南雨的古诗句是
新天龙八部玩家杀气值怎么消除
流行风线美发沙龙NO.3地址在哪,我要去那里办
高中必修1~5是几个学期学完的?
prxernsp.dll 和 prxerdrv.dll 是误报吗
推荐资讯
32g内存够用吗能拍相片多少张
口袋精灵2§伊苏的梦魇§在哪
纪晓岚第一部 最后 杜小月嫁给丰绅殷德了么?
以家为首字的接龙
歌手名字是六个字的有谁
1+1除了在算错的情况下等于3 还有一种情况下
风水能改变命运吗
阅读右图漫画,这启示我们A①公民在行使权利
美联储加息买什么股票
上海汇红工业小区怎么去啊,有知道地址的么
四川省交通厅公路规划勘察设计研究院招聘信息
服用益畅爽会有哪些反应?
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?