在使用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標籤的元素）】