HTML&CSS基础-否定伪类
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.html源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>否定伪类</title> <style> /** * 否定伪类选择器 * 作用: * 可以从已选中的元素中剔除某些元素 * 语法: * :not(选择器) * */ /** * 案例一: * 为所有的p元素设置一个背景颜色为黄色,除了class值为"hello"的 */ p:not(.hello){ background-color: yellow; } /** * 案例二: * 为所有的span元素设置一个背景颜色为红色,除了id为"def"的 */ span:not(#def){ background-color: red; } </style> </head> <body> <p>我是一个p标签</p> <p>我是一个p标签</p> <span>我是一个span标签</span> <span>我是一个span标签</span> <p>我是一个p标签</p> <p class="hello">我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <div> <span>我是div中一个span标签</span> <span>我是div中一个span标签</span> </div> <p class="world">我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <span id="def">我是一个span标签</span> <span>我是一个span标签</span> <span id="func">我是一个span标签</span> <span>我是一个span标签</span> <span>我是一个span标签</span><br /><br /> </body> </html>
二.浏览器打开以上代码渲染结果