### 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; } ~~~ 效果：