CSS选择器的优先级
来源:互联网 发布:动漫绘画软件 编辑:程序博客网 时间:2024/04/26 16:43
通常我们可以将CSS的优先级由高到低分为六组:
- 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。
- 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。
- 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
- 第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
- 第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
- 最低一级的选择器是为一个通配选择器,用*{margin:10px;}这样的类型来定义。
另外,可以用一句极为简单的话来描述CSS优先级问题:当一个CSS选择器拥有更多的高级别属性时,它的优先级就会比较高。如 #i100 *.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{} ,这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个,当然前者优先级会比较高。
CSS选择器是一个非常灵活的CSS属性,优雅的使用它会使你的页面代码不再臃肿,而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时,它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级:
- 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
- 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
- 第三级的优先属性由<link/>标签所引入的样式表定义。
- 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
- 第五级优先的样式有用户设定。
- 最低级的优先权由浏览器默认。
转自CSS优先级的计算公式:http://wyz.67ge.com/css-selector-priority/
0 0
- css选择器&选择器的优先级
- CSS选择器的优先级
- CSS选择器的优先级
- CSS 选择器的优先级
- css选择器的优先级
- CSS的选择器,优先级
- CSS选择器的优先级
- css选择器的优先级
- CSS选择器的优先级
- css选择器的优先级
- css选择器的优先级
- CSS选择器的优先级设定
- css中选择器的优先级
- css选择器的优先级比较
- CSS中选择器的优先级
- css 引入方式,选择器,选择器的优先级
- CSS选择器相关以及CSS选择器的优先级
- 一道关于CSS选择器优先级的题
- HDU5446 Unknown Treasure Lucas+中国剩余定理
- WCF时间通知
- 讨论下jquery中的重复添加和事件绑定(转)
- 应用层 ---> framwork层JNI ---> 驱动c
- Javascript学习笔记【第三章】1
- CSS选择器的优先级
- 邮件服务器运作原理
- 在Android Studio下使用百度语音识别的一个简单例子
- 图解 CSS (2): border - 边框
- mysql 获取指定时间时间戳
- JSP九大内置对象详解
- JAVA中获取当前系统时间
- oracle 一次删除多张表
- tftp通过“USB转串”连接主机和开发板