@layer规则嵌套语法示意实例页面

展示

代码

• HTML：

  <button>我的尺寸是？</button>
  <p>我的颜色是？</p>

• CSS：

  @layer outer {
      button {
          width: 100px;
          height: 30px;    
      }
      @layer inner {
          button {
              height: 40px;
              width: 160px;
          }    
      }
  }
  
  @layer 甲 {
      p { color: red; }
      @layer 乙 {
        p { color: green; }
      }
  }
  @layer 丙 {
      p { color: orange; }
      @layer 丁 {
        p { color: blue; }
      }
  }