CSS @layer规则低优先级实例页面

回到相关文章 »

效果:

我是链接

代码:

CSS代码:
@layer {
    .container .some-button { height: 30px; }
    :any-link { color: blue; }
    :any-link:hover { color: darkblue; }
}

.some-button { height: 40px; }
a { color: deepskyblue; }
a:hover { color: skyblue; }
HTML代码:
<div class="container">
    <button class="some-button">我是按钮</button>
    <p>
        <a href="#zhangxinxu">我是链接</a>
    </p>
</div>