:not(selector)选择器匹配非指定元素/选择器的每个元素

<!DOCTYPE html>
<html>
<head>
<style>
.p
{
color:#000000;
}
p:not(.p)
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p class="p">这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
<a href="http://www.anweb.me/" target="_blank">这里是a标签</a>
</body>
</html>

这里的用法就是所有p除了p.p的元素之外,其他都变成红色,效果如图01

图01

图01

 

当然也可以这样

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:#000000;
}
:not(p)
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
<a href="http://www.anweb.me/" target="_blank">这里是a标签</a>
</body>
</html>

效果如图02

图02

图02

未经允许不得转载:安超峰的网站 » :not(selector)选择器匹配非指定元素/选择器的每个元素

赞 (5)