CSS revert-layer关键字基本使用实例页面

回到相关文章 »

效果:

单@layer

  • 第1项,颜色是revert-layer
  • 第2项,作者张鑫旭, revert
  • 欢迎转发,点赞

多@layer

  • 第1项,类名是revert-layer
  • 第2项,作者张鑫旭, revert
  • 欢迎转发,点赞

嵌套@layer

  • 第1项,类名是revert-layer
  • 第2项,作者张鑫旭, revert
  • 欢迎转发,点赞

代码:

CSS代码:
@layer {
    .li-1-revert-layer {
        color: revert-layer;
    }
    .li-1-revert {
        color: revert;
    }
    .li-1-deepcolor {
        color: deepskyblue;
    }
}

@layer base, special;

@layer special {
    .li-2-revert-layer {
        color: revert-layer;
    }
    .li-2-revert {
        color: revert;
    }
    .li-2-deepcolor {
        color: deepskyblue;
    }
}

@layer base {
      .li-2-revert-layer {
        color: deeppink;
      }
      .li-2-revert {
        color: deeppink;
    }
    .li-2-deepcolor {
        color: deeppink;
    }
}

@layer outer {
    .li-3-revert-layer {
        color: revert-layer;
    }
    .li-3-revert {
        color: revert;
    }
    .li-3-deepcolor {
        color: deepskyblue;
    }  
    @layer inner {
        .li-3-revert-layer {
            color: deeppink;
        }
        .li-3-revert {
            color: deeppink;
        }
        .li-3-deepcolor {
            color: deeppink;
        }
    }
}
HTML代码:
<h4>单@layer</h4>
<ul>
    <li class="li-1-revert-layer">第1项,颜色是revert-layer</li>
    <li class="li-1-revert">第2项,作者张鑫旭, revert</li>
    <li class="li-1-deepcolor">欢迎转发,点赞</li>
</ul>


<h4>多@layer</h4>
<ul class="second">
    <li class="li-2-revert-layer">第1项,类名是revert-layer</li>
    <li class="li-2-revert">第2项,作者张鑫旭, revert</li>
    <li class="li-2-deepcolor">欢迎转发,点赞</li>
</ul>

<h4>嵌套@layer</h4>
<ul class="third">
    <li class="li-3-revert-layer">第1项,类名是revert-layer</li>
    <li class="li-3-revert">第2项,作者张鑫旭, revert</li>
    <li class="li-3-deepcolor">欢迎转发,点赞</li>
</ul>