解析J2ME中CSS的使用(1)(2)
三：CSS优先级 层叠次序 当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式
三：CSS优先级
层叠次序
当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
i.浏览器缺省设置
ii.外部样式表
iii.内部样式表（位于<head>标签内部）
iv.内联样式（在HTML元素内部）
因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）
下面对内联样式中css优先级具体介绍css优先级的四大原则：
原则一：继承不如指定
如果某样式是继承来的永远不如具体指定的优先级高。
例子1：
CODE:
- <styletypestyletype="text/css">
- *{font-size:20px}
- .class3{font-size:12px;}
- </style>
- <spanclassspanclass="class3">我是多大字号？</span>
运行结果：.class3{font-size:12px;}
原则二：#ID>.class>标签选择符
例子：
CODE:
- <styletypestyletype="text/css">
- #id3{font-size:25px;}
- .class3{font-size:18px;}
- span{font-size:12px}
- </style>
- <spanidspanid="id3"class="class3">我是多大字号？</span>
运行结果：#id3{font-size:25px;}
原则三：越具体越强大。
解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。
CODE:
- <styletypestyletype="text/css">
- .class1.class2.class3{font-size:25px;}
- .class2.class3{font-size:18px}
- .class3{font-size:12px;}
- </style>
- <divclassdivclass="class1">
- <pclasspclass="class2">
- <spanclassspanclass="class3">我是多大字号？</span>
- </p>
- </div>
运行结果：.class1.class2.class3{font-size:25px;}
原则四：标签#id>#id;标签.class>.class
上面这条原则大家应该也都知道，看例子
CODE:
- <styletypestyletype="text/css">
- span#id3{font-size:18px}
- #id3{font-size:12px}
- span.class3{font-size:18px}
- .class3{font-size:12px}
- </style>
- <spanidspanid="id3">我是多大字号？</span>
- <spanclassspanclass="class3">我是多大字号？</span>
运行结果：span#id3{font-size:18px}|span.class3{font-size:18px}
精彩图集
精彩文章