💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
### 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内所有的子元素都添加颜色。 ~~~ 效果: ![](https://box.kancloud.cn/2eac13d66a8d91888a0c1df66b3ecfe6_252x126.png) **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); } ~~~ 效果 ![](https://box.kancloud.cn/1ba44dedcedeaae43f085c1ad8e235c6_257x122.png) #### 注:以下示例均是: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 ~~~ 效果: ![](https://box.kancloud.cn/956041ba0469ec1f2693d2c84f6f9346_431x167.png) <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标签除了最后一个,其他的显示蓝色。 ~~~ 效果: ![](https://box.kancloud.cn/38753d0781c6e73cb4bf2ea3485f71f3_175x120.png) <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"的其他显示红色 ~~~ 效果: ![](https://box.kancloud.cn/f575171789bfa48e09b518e10e28ea21_173x128.png) <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显示蓝色。 ~~~ 效果 ![](https://box.kancloud.cn/b206c656888d71c585ae491ee82cd52c_229x152.png) <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的执行书写 ~~~ 效果: ![](https://box.kancloud.cn/cd67baccc6ed267e877f77b1d019eb14_320x85.png) <br/> <br/> <br/> * 位置伪类在后 css: ~~~ .div1 li:not(.test2):first-child{ font-size: 40px; } ~~~ 效果: ![](https://box.kancloud.cn/cd67baccc6ed267e877f77b1d019eb14_320x85.png) <br/> <br/> * . 位置伪类和not()指同一个元素 css: ~~~ .div1 li:not(.test1):first-child{ font-size: 40px; } ~~~ 效果: ![](https://box.kancloud.cn/5ea09de9cb71ba25724fb45b213be980_235x57.png) <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; } ~~~ 效果: ![](https://box.kancloud.cn/e88be961b6cf4b86e3014df058b9a561_325x235.png) <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前面加上红色方框。 ~~~ 效果: ![](https://box.kancloud.cn/0f1b93b8dec0fe4903fc945b08f4d3fb_227x71.png) <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; } ~~~ 效果: ![](https://box.kancloud.cn/8d518e081c4775d6b35a446b70709d89_396x146.png)