在使用css的时候，少不了接触伪类，而not这种选择器之前基本没有写过，在今天遇到后，就来和大家一起探索探索。
1、案例1：
<style>
p{
color:#000000;
}
:not(p){
color:#ff0000;
}
</style>
<div class="test1">div样式1</div>
<div class="test2">div样式2</div>
<p>p样式1</p>效果：
p标签是黑色，div标签是红色（not选择器）；
2、案例二：
<style>
p{
color:#000000;
}
:not(p){
color:#ff0000;
}
</style>
<div class="test1">div样式1</div>
<div class="test2">
div样式2
<p>嵌套在div中的p样式</p>
</div>
<p>p样式1</p>
<a>a样式1</a>
<br />
<i>i样式1</i>
<ul>
<li>li样式</li>
</ul>效果：
p标签黑色（纯p标签，嵌套在div中的p标签），div 、a、i、li标签红色（非p标签）
3、案例三
<style>
div {
width: 100px;
height: 100px;
margin: 5px 10px;
display: inline-block;
color: white;
float: left;
}
.red {
background: red;
}
.orange {
background: orange;
}
div.red:not(.orange){
border: 4px solid deepskyblue;
}
</style>
<div class="red">red</div>
<div class="orange">orange</div>
<div class="red orange">red + orange</div>效果：
含red、不含orange的为红色，含red的orange为橙色。含red的且不含其他class的显示border为蓝色。
即：div.red:not(.orange)可以这样理解： 含red但是不含orange的元素。【用于同一元素含多个样式的选择性渲染】
【分析】在style中orange位于red之后，同时作用在div上，会以在style中加载最后的那一个为主，渲染dom元素。
4、案例四
<style>
div {
width: 100px;
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 5px 10px;
display: inline-block;
color: white;
float: left;
}
.red {
background: red;
}
.orange {
background: orange;
}
.blue {
background: blue;
}
div.red:not(.orange){
border: 4px solid deepskyblue;
}
div.red.blue{
clear: both;
}
div.red.orange.blue{
width: 150px;
}
</style>
<div class="red">red</div>
<div class="orange">orange</div>
<div class="blue">blue</div>
<div class="red orange">red + orange</div>
<div class="red blue">red+blue</div>
<div class="red orange blue">red+orange+blue</div>
<div class="blue orange">blue+orange</div>效果：
我们会发现，有red，但是没有orange的元素被添加了border，也就是这样说not可以被理解选择为不含（）里面的元素。
总结：
1）：not（selector）
是指不含selector样式的其他所有的元素
2）xx标签.class:not(selector)
是指含class的xx标签，但不含selector样式的所有xx元素的 【即（含class和非selector的xx标签的元素）】