### 1.71 not(X)否定伪类选择器 **定义：**否定伪类选择器，用于选择不满足某些条件的元素，**意思：不是(X)或除了(X)** **X代表的意思：** 1.标签元素 2.class类名 3.除了not外的其他伪类元素。 **特别注意：** 选择器名或伪类：not(X)，如果在：not(X)前面加一个空格，则表示该选择器或伪类的子元素； #### 列子： **1.not(X)前面不加空格** html代码 ~~~ <section> <p>P标签，:not(x)前面不加空格</p> <span>span标签，:not(x)前面不加空格</span> <p>P标签，:not(x)前面不加空格</p> </section> ~~~ css ~~~ section:not(p) { color: rgb(40,170,220); }//not(X)前面不加空格，则把section内所有的子元素都添加颜色。 ~~~ 效果：  **2.not(X)前面加空格** html代码 ~~~ <section> <p>P标签，:not(x)前面加空格</p> <span>span标签，:not(x)前面加空格</span> <p>P标签，:not(x)前面加空格</p> </section> ~~~ css ~~~ section :not(p) { color: rgb(40,170,220); } ~~~ 效果  #### 注：以下示例均是：not前面不加空格的。 #### **一、只有:not(X)，无其他伪类** **列子1：**X用class类名显示 html代码： ~~~ <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> </ul> ~~~ css： ~~~ li:not(.different) { font-size: 40px; }//li标签中除了class等于different字体大小是40px ~~~ 效果：  <br/> <br/> <br/> **例子2：**X显示伪类 html代码： ~~~ <div class="div1"> <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> <li class="test3">li标签，test3</li> <li class="test4">li标签，test4</li> </ul> </div> ~~~ css： ~~~ .div1 li:not(:last-child){ color:blue; }//div1内li标签除了最后一个，其他的显示蓝色。 ~~~ 效果：  <br/> <br/> <br/> **例子3：**一行css代码中 有2个not（）是且关系， html代码： ~~~ <div class="div1"> <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> <li class="test3">li标签，test3</li> <li class="test4">li标签，test4</li> </ul> </div> ~~~ css： ~~~ .div1 li:not(:last-child):not(.test2){ color: red; }//div1内li标签中除了最后一个和class="test2"的其他显示红色 ~~~ 效果：  <br/> <br/> <br/> **例子4：**2行css代码，都有not（）伪类，就是讲列子2和列子3结合产生效果 html代码 ~~~ <div class="div1"> <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> <li class="test3">li标签，test3</li> <li class="test4">li标签，test4</li> </ul> </div> ~~~ css代码 ~~~ .div1 li:not(:last-child):not(.test2){ color: red; } .div1 li:not(:last-child){ color:blue; } //意思：先执行第一行css，除了最后一个和class="test2"的其他显示红色，则test2和test4没有颜色， 第二行css，是执行第一行代码剩下的li标签（test2和test4）除了最后一行显示蓝色，则test2显示蓝色。 ~~~ 效果  <br/> <br/> <br/> #### **二、:not(X)和first-child,last-child,nth-child(n),nth-of-type(n)等表示位置伪类一起运用，** **列子1.**一行css，位置伪类和:not(X)，是且的关系，条件需要一起达成。位置和：not（X）不指的是同一个元素或标签，则前后没有区别，如果位置和：not（X）指的是同一个元素或标签，则执行不了效果。 html代码： ~~~ <div class="div1"> <ul> <li class="test1">li标签，test1</li> <li class="test2">li标签，test2</li> </ul> </div> ~~~ <br/> <br/> * 位置伪类在前 css： ~~~ .div1 li:first-child:not(.test2){ font-size: 40px; }//第一个且不是test2的执行书写 ~~~ 效果：  <br/> <br/> <br/> * 位置伪类在后 css： ~~~ .div1 li:not(.test2):first-child{ font-size: 40px; } ~~~ 效果：  <br/> <br/> * . 位置伪类和not()指同一个元素 css: ~~~ .div1 li:not(.test1):first-child{ font-size: 40px; } ~~~ 效果：  <br/> <br/> <br/> **例子2：**两行代码。一行是not，一行是位置伪类，没有前后关系，位置伪类的选择器执行该位置伪类的所有css样式，跟not没有关系。 html代码： ~~~ <div class="div1"> <ul> <li class="test1">li标签，test1</li> <li class="test2">li标签，test2</li> <li class="different">li标签，different</li> <li class="test3">li标签，test3</li> <li class="test4">li标签，test4</li> </ul> </div> ~~~ css代码： ~~~ .div1 li:not(.test2){ font-size: 40px; } .div1 li:nth-child(2){ color: red; } ~~~ 效果：  <br/> <br/> <br/> #### **三、:not(X)和:before,:after伪类一起** **列子1：**一行css，是先后执行，before和after在not()后面，如放在前面不起效果。 html代码 ~~~ <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> </ul> ~~~ css代码 ~~~ li:not(.different):before { content:""; display: inline-block; width: 10px; height: 10px; background:red; }//先执行not(.different)，则剩下test1和test2，再执行:before，则将剩下的test1和test2前面加上红色方框。 ~~~ 效果：  <br/> <br/> <br/> **列子2:**两行css，一行是not，一行是before或after伪类，没有前后关系，before或after伪类的选择器执行before或after样式，跟not(X)没有关系。 html代码 ~~~ <ul> <li class="test1">li标签，test1</li> <li class="different">li标签，different</li> <li class="test2">li标签，test2</li> </ul> ~~~ css ~~~ .div1 li:not(.different){ font-size: 40px; } .div1 li:before { content:""; display: inline-block; width: 10px; height: 10px; background:red; } ~~~ 效果：