CSS中的三大特性

web.jpeg

1.层叠性

• 层叠性就是一个标签有多个样式属性，产生了属性冲突，层叠性就是解决冲突的，覆盖前面的样式

image.png image.png

2.继承性

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

 <style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>

  <div> 
          <p>这是一个段落</p>
          <a href="#">这是一个a标签</a>
          <ul>
              <li>这是一个ul列表</li>
          </ul>
    
      </div>

image.png

3.优先级(权重)

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

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

image.png

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

image.png

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

image.png

image.png

注意：在设置 文本的样式的时候，必须是选中的 这个文本标签，如果没有选中的话，通过继承类的，那权重是0。

image.png