这篇文章主要讲解了“css样式优先级的权重如何划分”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css样式优先级的权重如何划分”吧!
首先,同一个标签上可能会有多个不同的 CSS 属性,这些 CSS 属性作用在同一个标签上,就有了优先级的差异,一般情况下简单的选择器的权重大概可以按照如下的顺序(从高到低)进行比较:
最高级别的权重:!important
,属于绝对优先;
第二级别的权重:行间样式(内联样式);
第三级别的权重:id 选择器;
第四级别的权重:class 选择器,伪类选择器,属性选择器;
第五级别的权重:标签选择器,伪元素选择器;
第六级别的权重:通配符选择器(*),子选择器(>),相邻同胞选择器(+)等选择器;
最低级别的权重:浏览器默认样式;
有上述的规律也可以知道:浏览器默认样式最低,是因为通配符选择器都能比他更优先;因为通配符选择器样式权重极低,所以一般在 CSS 中用来初始化浏览器样式。
以上是权重不同的情况,那如果权重相同的情况怎么比较呢?CSS 可以理解为是顺序执行的,权重相同的情况下位于后面的代码会覆盖掉前面的代码。
根据以上规律,可以得到如何避免 CSS 冲突的办法:如果可以提升权重,就提升权重;如果不能提升权重,就把权重提到相等,然后将要渲染的样式放到较后方(不建议使用这种方法,因为有些浏览器可能不支持这种做法)。
另外,很多读者会问,不是还有最高级权重嘛?没错,可以使用最高级权重来进行样式的锁定,但这样会让代码不好定位样式错误,所以不到万不得已,千万不要使用。此外,行间样式也应该尽量少用,因为标准的 HTML 与 CSS 的分工,是 HTML 负责文本结构,CSS 负责样式处理,如果使用行间样式,就相当于让 HTML 也负责了样式,这样子对样式的调试也不好。
感谢各位的阅读,以上就是“css样式优先级的权重如何划分”的内容了,经过本文的学习后,相信大家对css样式优先级的权重如何划分这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。