9-2CSS特殊性
2016-06-19 15:41
281 查看
的时候我们为同一个元素设置了不同的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,所以可以理解为继承的权值最低。
相关文章推荐
- 9-1CSS的继承
- css 绘制圆形 扇形
- 史上最详细 纯CSS打造3D文本滚动
- 7-2嵌入式css样式,写在当前的文件中
- 7-1内联式css样式,直接写在现有的HTML标签中
- css文字分散对齐
- 6-3CSS代码语法
- 6-2CSS样式的优势
- 6-1认识CSS样式
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- Flex 布局教程:实例篇
- Flex 布局教程:语法篇
- CSS margin和padding
- 拥有的50个CSS代码片段(上)
- css3基础、(弹性、响应式)布局注意点
- CSS3变形之transform-origin属性
- 用css样式,为表格加入边框
- CSS入门
- CSS选择器详解
- CSS3变形之3D变形