<!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
当然也可以这样
<!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
未经允许不得转载:安超峰的网站 » :not(selector)选择器匹配非指定元素/选择器的每个元素