CSS选择器以及优先级

来源:互联网 发布:淘宝黑科技产品 编辑:程序博客网 时间:2024/04/28 04:38

前言:对于了解css选择器的优先级到底有多重要呢?用优先级高的去覆盖优先级低的,从而达到自己想要的页面样式,这是前端学习踩坑中我发现必不可少的一门知识点或者说必须要的技能吧。说法有错的欢迎纠正。

css选择器优先级

1.无条件优先属性只需要在属性后面加上!important,就覆盖了页面内任何位置定义的元素样式,但是呢,也有不支持的,比如IE6。

2.第二个优先级的就是在html中给元素标签添加style,但是这样很不好的,为什么呢,为了后期的代码的可维护性,我们都知道html和css低耦合是很重要的,如果后期只是css需要更改,但是你却需要在html和css文件中找需要更改的样式,是不是很浪费时间呢,故不推荐。

3.第三级优先属性则是一个或者多个ID选择器定义。例如#id{margin:0;}

4.第四级优先属性是由类选择器,属性选择器,伪类选择器定义的。例如.classname{margin:0 auto;}
5.第五级选择器由一个或者多个类型选择器来定义,div{margin:12px;}

6.最低优先级的就是通配选择器,例如*{margin:0;padding:0;},用于解决不同浏览器之间的标签默认的外补丁和内补丁不同的兼容性问题解决。

0 0