@layer规则低级联层级示意实例页面

展示

代码

• HTML：

  <p class="container">
      <button class="some-button">我的高度是？</button>
  </p>
  <p>
      <a href>我的颜色是？</a>
  </p>

• CSS：

  @layer {
      .container .some-button { height: 30px; }
      :any-link { color: darkblue; }
      :any-link:hover { color: blue; }
  }
  /* 业务代码 */
  .some-button { height: 40px; }
  a { color: deepskyblue; }