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

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>