元素设置不同样式时调用哪一个样式问题---(样式权值)
来源:互联网 发布:办公软件 英文 编辑:程序博客网 时间:2024/06/07 04:40
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
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,所以可以理解为继承的权值最低。
0 0
- 元素设置不同样式时调用哪一个样式问题---(样式权值)
- TextView设置不同样式
- Textview设置不同样式
- AngularJS 设置元素样式
- JS设置HTML元素float样式问题
- 解决设置float样式后父级元素不适应问题
- jQuery获取、设置元素和元素样式操作(note)
- 样式
- 样式
- 样式
- 样式
- WPF 样式和资源 给某个元素设置Style样式
- JavaScript / jQuery 设置、获取元素属性 值 设置style样式
- 关于设置textarea样式问题
- 使用selector设置按钮不同状态的样式(Android)
- 同一个textview中设置字体不同样式
- DataTemplateSelector 设置控件不同的样式
- TextView文本设置不同的样式
- android 控件对齐方式
- 同步的机制(一)
- Mac osx 下 升级php版本 配置apache
- 一个Activity掌握Android4.0新控件
- 欢迎使用CSDN-markdown编辑器
- 元素设置不同样式时调用哪一个样式问题---(样式权值)
- ViewPager 详解(一)---基本入门
- Java:多线程学习
- 数字三角形
- 使用RecyclerView的丢人史
- 【一天一道LeetCode】#31. Next Permutation
- Assembly(c#中简单说明[转]
- 上机题-进制转换
- AngularJs