【Html】特殊性-权值
2015-12-10 00:04
351 查看
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
相关文章推荐
- HTML下拉框、文本框、复选框!
- html-----表单标签
- html---------frameset和frame框架
- html————表格
- HTML转PDF
- html返回上一页
- #学习笔记#(10)元素拖放事件-html
- 【html】【11】函数名称约束规范
- Html标签第一课
- html设置编码
- 纯文本转超文本
- HTML 中的块级元素和内联元素
- 夺命雷公狗---Smarty NO:19 html_options函数
- 夺命雷公狗---Smarty NO:18 html_checkboxes
- 夺命雷公狗---Smarty NO:17 html_table函数
- 夺命雷公狗---Smarty NO:16 html_image函数
- html——图片标签
- Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别
- html多媒体标签
- html的input输入框边框