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>
二.浏览器打开以上代码渲染结果