CSS继承和层叠--笔记回顾_css层叠与继承-CSDN博客

本文链接：https://blog.csdn.net/qq_47000934/article/details/109275114

CSS继承和层叠--笔记回顾

1、CSS属性的继承
2、CSS继承的注意事项
3、CSS层叠的基本颜良

1、CSS属性的继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      color: blue;
      font-size: 20px;
      font-weight: 700;
      /* 一个元素如果没有设置某属性的值，就会跟随父元素的值 */
      /* 当然，一个元素如果有设置某属性的值，就使用自己设置的值 */
      width: 500px;
    }

    img{
      /* width:100% */

      /* 强制继承 */
      width: inherit;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>哈哈哈</p>
    <strong>呵呵呵呵</strong>
</body>
</html>

在这里插入图片描述

2、CSS继承的注意事项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1 {
      font-size: 60px;
    }

    .box2 {
      /* 30px */
      font-size: 0.5em;
    }

    /* p->inherited from .box2->30px */
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <p>哈哈哈</p>
    </div>
  </div>
</body>
</html>

在这里插入图片描述

3、CSS层叠的基本颜良

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 基本层叠：后面一定把前面层叠掉
       前提：使用了相同的选择器
     */
    .box1{
      color: red;
    }

    .box2{
      background-color: lawngreen;
      color: lightcoral;
    }

    .box3{
      width: 300px;
      color: lightseagreen;
    }

    /* 当选择器不同时，就不能按照基本层叠来理解 
       需要知道选择器的权重：
            !important:10000
            内联样式：1000
            id选择器:100
            类选择器、属性选择器、伪类:10
            元素选择器、伪元素：1
            通配符：0
    */
    #main {
      color: lightseagreen;
      font-size: 30px;
    }

    .box {
      color: lightskyblue;
      font-size: 12px !important;
    }

    div {
      color: lightslategrey;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="box1 box2 box3">hahahha</div>

  <div id="main" class="box" style="color: mediumorchid;"></div>
</body>
</html>

在这里插入图片描述