今天小编跟大家讲解下有关浏览器对于CSS不同类中的同属性不同值优先级问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浏览器对于CSS不同类中的同属性不同值优先级问题 的相关资料，希望小伙伴们看了有所帮助。
自己做点小程序的时候发现在一个标签中的不同两个类给同一属性设定了不同值的时候 最终属性取值的特点： 上面这句话有够拗口的 用例子说明一切吧。 csstest.html: 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <title>CSStest</title> <link rel="stylesheet"href="https://www.aidi.net.cn//css/1.css"/> <link rel="stylesheet"href="https://www.aidi.net.cn//css/2.css"/> </head> <body> <!-- 类 a b c d 在1.css中 类 e 在2.css中 --> <p class="a b">aaaaaaa</p> <p class="b a">bbbbbbb</p> <p class="c e">ccccccc</p> <p class="e c">ddddddd</p> <p class="d e">eeeeeee</p> <p class="e d">fffffff</p> </body> </html> 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的属性值来说 遵循上面的规律。
来源：爱蒂网
