栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

浏览器对于CSS不同类中的同属性不同值优先级问题

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

浏览器对于CSS不同类中的同属性不同值优先级问题

自己做点小程序的时候发现在一个标签中的不同两个类给同一属性设定了不同值的时候,最终属性取值的特点:

上面这句话有够拗口的,用例子说明一切吧。

csstest.html:

复制代码代码如下:



CSStest





aaaaaaa


bbbbbbb


ccccccc


ddddddd


eeeeeee


fffffff





1.css

复制代码代码如下:
.a{
cursor: pointer;
font-size: 1em;
}
.b{
cursor: move;
font-size: 2em;
}
.c{
cursor: crosshair;
font-size: 3em;
}
.d{
cursor: help;
font-size: 4em !important;
}

2.css

复制代码代码如下:
.e{
cursor: progress;
font-size: 5em;
}

最后在浏览器审查元素的时候发现:

1、第一第二段落中,鼠标样式都为move,字体大小都为2em,仅类b发挥了作用。

则说明:无论在标签中class属性里类的顺序如何,最终相同的属性值取css文件中声明位置最后的那个。

2、第三第四段落中,鼠标样式都为progress,字体大小都5em,仅类e发挥了作用,而在加载html页面的时候,先加载1.css,再加载2.css。

则说明:无论在标签中class属性里类的顺序如何,最终相同的属性值取最后加载的css文件中声明位置最后的那个。

3、第五第六段落中,鼠标样式都为progress,字体大小都4em,类e起效,类d由于设定了!important,也起效。

则说明:设定了!important的值会优先被选取。

后来我又测试了一下,把e中的font-size也加上!important之后,字体大小会变为5em,则对于都设定了!important的属性值来说,遵循上面的规律。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/216835.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号