css继承性

子元素有默认继承父元素样式的特点。可以继承的常见属性(文字控制属性都可以继承):

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height 等等。

可以通过调试工具判断样式是否可以继承。

继承失效的特殊情况: 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

a标签的color会继承失效
h系列标签的font-size会继承失效

下面的代码是浏览器效果示例：

  <style>
    div {
      color: red;
      font-size: 18px;
    }
  </style>
  
<body>
  <div>div
    <p>p</p>
  </div>

  <div><a href="#">超链接</a></div>
  <div>
    <h1>h1</h1>
  </div>
</body>

想想看，文字div，p，超链接，h1各自是什么样式？

css继承优先级问题

都是继承，继承里面谁的优先级高，看继承哪个父级，哪个父级高，哪个选择器生效。

问题演示：

  <style>
    div p {
      color: red;
    }

    .father {
      color: blue;
    }
  </style>
  
<body>
  <div class="father">
    <p class="son">
      <span>文字</span>
    </p>
  </div>
</body>

文字是红色的还是蓝色的？

可见是红色的。

css层叠性

层叠性特点:

给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点:当样式冲突时，只有当选择器优先级相同时才能通过层叠性判断结果

代码演示：

  <style>
    div {
      color: aliceblue;
      color: #000;
    }

    .box {
      font-size: 30px;
    }
  </style>
<body>
  <div class="box">div</div>
</body>

div是什么颜色的？

可见#000颜色将aliceblue颜色覆盖了，所以显示黑色。

css的几个特殊性

css继承性

css继承优先级问题

css层叠性

感谢支持！