CSS中的三大特性

CSS中的三大特性_第1张图片
web.jpeg

1.层叠性

  • 层叠性就是一个标签有多个样式属性,产生了属性冲突,层叠性就是解决冲突的,覆盖前面的样式
CSS中的三大特性_第2张图片
image.png
CSS中的三大特性_第3张图片
image.png

2.继承性

  • 主要是指:子元素继承父元素的一些样式
  • 一般是文本类的,比如:color,或者以text-,line-,font-开头的属性样式可以继承,及时关于文字类的样式
  • 注意:a标签不会继承父类的color的属性样式
 

  

这是一个段落

这是一个a标签
  • 这是一个ul列表
CSS中的三大特性_第4张图片
image.png

3.优先级(权重)

前面说的层叠性产生覆盖,是权重相同的情况下,如果权重不同,那么就会出现不同的情况,那么权重是怎么计算的呢?

权重的大小是根据,id选择器类选择器,和 标签选择器数量决定
标签选择器 权重是 0 0 0 1
类和伪类的权重是 0 0 1 0
id选择器的权重是 0 1 0 0
行内样式的权重是 1 0 0 0
如果在属性后面加上!important 权重是无限大

CSS中的三大特性_第5张图片
image.png

从上图的中可以知道, 第一个样式的权重比较大 所以显示的样式是 红色字体

image.png

如果权重一样大,就用到层叠性 谁在后面听谁的 比如:

CSS中的三大特性_第6张图片
image.png

CSS中的三大特性_第7张图片
image.png
注意:在设置 文本的样式的时候,必须是选中的 这个文本标签,如果没有选中的话,通过继承类的,那权重是0。
CSS中的三大特性_第8张图片
image.png

你可能感兴趣的:(CSS中的三大特性)