写在前面
为啥突然要写这么一个东西?原因当然是工作时遇到的项目用了它啊!!!
什么是not选择器?
先看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3中的not选择器</title>
<style>
li{
color: red;
}
li:nth-child(3){
color: blue;
}
li:nth-last-child(2){
color: green;
}
li:nth-last-of-type(4){
color: orange;
}
li:nth-of-type(6){
color: yellow;
}
/* not 选择器:设置非某个元素的其他元素的样式 */
:not(li){
color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
<li>我是列表项6</li>
<li>我是列表项7</li>
<li>我是列表项8</li>
<li>我是列表项9</li>
<li>我是列表项10</li>
<div>我是not盒子</div>
<p>我是not段落</p>
</ul>
</body>
</html>
再看效果:
知道为啥要记录一下了吧!!
重要的事情说三遍:不常用!!!不常用!!!不常用!!
一旦用了,你确定你会???
作者反正是懵了,关键是项目它用了呀!!!!!!