一、继承性
1.文字的color、font-size、font-style、font-weight、font-family、text-alian、line-height、text-indent等这些属性都是可以继承的。
2. 特殊性
1》标题系列不会继承父元素的文字大小
2》a标签不会继承父元素的字体颜色
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ color: red; font-size: 50px; font-weight: 700; font-family: "microsoft yahei"; font-style: italic; text-align: left; line-height: 70px; text-indent: 2em; } </style> </head> <body> <div class="box"> <p>呵呵哒</p> <h2>呵呵哒</h2> <a href="#">超链接</a> </div> </body> </html>
二、层叠性
多个样式作用于同一个标签上之时,发生了样式冲突,当权重相同的时候,后来的样式会覆盖前边的样式,总是执行后边的样式,和元素样式的调用顺序无关。
三、优先级
默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
0 1 10 100 1000 1000以上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ font-size: 20px!important; color: red!important; } .box{ font-size: 30px; color: blue; } #txt{ font-size: 50px; color: orange; } </style> </head> <body> <div class="box" id="txt" style="font-size:100px; color:skyblue;">前端老霸气了</div> </body> </html>
注意:
继承的权重为0(当子元素没有样式的时候回继承父元素的样式,如果自己有样式会执行自己的样式);
权重会叠加。