CSS :not伪类复杂参数权重测试实例页面

回到相关文章 »

效果：

级联测试

zxx-not1且class="a b"

zxx-not1且class="c d"

并列测试

zxx-not2且class="a b"

zxx-not2且class="c d"

代码：

CSS代码：

.c.d {
    background: #333;
    color: #fff;
}
zxx-not1:not(.a):not(.b),
zxx-not2:not(.a, .b) {
    background: #aaa;
    color: #333;
}

HTML代码：

<h4>级联测试</h4>
<zxx-not1 class="a b">zxx-not1且class="a b"</zxx-not1>
<zxx-not1 class="c d">zxx-not1且class="c d"</zxx-not1>

<h4>并列测试</h4>
<zxx-not2 class="a b">zxx-not2且class="a b"</zxx-not2>
<zxx-not2 class="c d">zxx-not2且class="c d"</zxx-not2>