css知识总结(二)之css的三大特性:层叠性,继承性,优先级
2020-06-16 18:28
489 查看
css的三大特性:层叠性,继承性,优先级
层叠性
什么是层叠性呢?
当我们对同一个元素设置样式的时候,在权重相同的情况下,先写的样式会被后面所写的样式给替代掉,这就是层叠。
举个“栗子”
html代码:
<div class="red">我的字体颜色是红色<div>
css代码:
.red { color: blue; } .red { color: red; }
此时对同一个选择器进行样式设置的时候,前面的字体颜色设置为blue就会无效
简单来说就是就近原则,近的有效。
继承性
继承性从字面意思可以理解的到,子元素会继承父元素的样式。但是!
不是所有的样式都会继承,子元素只能继承父元素的****text-,font-,line- 开头的元素和color属性。
同样的举个例子:
html代码:
<div> 父亲 <p>儿子<p> <div>
css代码:
div { font-size: 50px; color: red; }
此时父亲和儿子的字体大小都为50像素,字体颜色都为红色
总的来说,这样的好处就是,父元素和子元素有相同可继承的样式时,我们只需要写一次,能够降低css代码的冗余度。
优先级
- 权重表
对象 | 权重 |
---|---|
*和继承 | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
伪元素选择器 | 0,0,0,1 |
class选择器 | 0,0,1,0 |
属性选择器 | 0,0,1,0 |
伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
内联样式 | 1,0,0,0 |
important! | 无穷大 |
- 权重叠加
举例子
/*权重为 0,0,0,3 */ div ul li { color: red; }
/*权重为 0,0,1,2*/ .nav ul li { color: red; }
相关文章推荐
- CSS(4)---三大特性(继承性,层叠性,优先级)
- 【4】css知识点:19.CSS三大特性之继承性 20.CSS三大特性之层叠性 21.CSS三大特性之优先级 22. !important 优先级 23.优先级之间的权重问题
- CSS三大特性---层叠性,继承性,优先级
- CSS三大特性继承性,层叠性,优先级
- CSS 三大特性: 继承性、层叠性、优先级
- CSS三大特性 - 继承性、层叠性及优先级
- CSS三大特性之继承性
- css的三大特性(继承,层叠,优先级)
- CSS三大特性之优先级
- CSS的三大特性总结
- 0426-CSS三大特性之继承性
- 0426-CSS三大特性之层叠性
- CSS三大特性继承性
- 0426-CSS三大特性之优先级
- CSS的三大特性(继承,层叠,优先级)
- 选择器总结 浮动 CSS的三大特性
- CSS三大特性之优先级
- CSS三大特性—— 继承、 优先级和层叠。
- CSS的三大特性——继承,层叠、优先级
- H5 24-CSS三大特性之继承性