CSS三大特性
(1)继承性
作用: 子元素可以继承父元素的样式
注意:
-
不是所有元素都可以继承,只有以text-,font-,line-这些元素开头的都可以继承,以及color属性
-
CSS继承中不仅仅是儿子可以继承, 只要是后代都可以继承
-
特殊性:
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的<div class="div1"> <a href="#">百度一下</a> <h1>我是一个h标签</h1> <p>1个</p> <p>2个</p> <p>3个</p> <div class="div2"> <p>1个</p> <p>2个</p> <p>3个</p> </div> </div>
(2)层叠性
作用: 当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性
注意:
-
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
-
层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式
div{ background-color: red; } div{ background-color: blue; } <div>123</div> <!-- 最终背景颜色是蓝色 --> <div style="background-color: green;">123</div> <!-- 最终背景颜色是绿色 -->
(3)优先级
作用: 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
注意:
-
间接选中就是指继承, 那么就是谁离目标标签比较近就听谁的
-
相同选择器(直接选中), 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
-
不同选择器(直接选中),按照选择器的优先级来层叠
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承优先级之!important
作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
权重计算方法
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
-
!import ,权值无限大
-
内联样式,如: style="…",权值为1000。
-
ID选择器,如:#content,权值为0100。
-
类,伪类、属性选择器,如.content,权值为0010。
-
标签选择器、伪元素选择器,如div p,权值为0001。
-
通配符、复合选择器(+、>、~等)、否定伪类(:not)没有影响,权值为0000。
-
继承的样式没有权值
注意:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
计算规则:
-
首先先计算选择器中有多少个id, id多的选择器优先级最高
-
id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
-
类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
-
id、 类名、 标签名称个数也一样, 那么此时谁写在后面听谁的