css -- 偽類選擇器 · 前端知識 -- 學習整理

>[success] # 偽元素選擇器 * `:nth-child(n)` ：匹配屬于其父元素的第 N 個子元素，不論元素的類型 * `:nth-child(1)`，是父元素中的**第1個子元素** * ` :nth-child(2n)`,是父元素中的第**偶數個子元素**,跟`:nth-child(even)同義` * `:nth-child(2n + 1)`,是父元素中的第**奇數個子元素**,跟`:nth-child(odd)同義` * `nth-child(-n + 2)`,代表前**2個子元素** * `:nth-last-child()`的語法跟:nth-child()類似，不同點是:nth-last-child()從**最后一個子元素開始往前計數** * `nth-of-type()`計數時只計算**同種類型的元素** * `nth-last-of-type()`從最后一個這**種類型的子元素開始往前計數** ***** * 案例說明 -- 下面案例中找到`outer` 元素下第一個子元素且不限制類型，因此span 標簽字體顏色變成紅色 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer :nth-child(1){ color: red; } </style> </head> <body> <div class="outer"> <span>元素1</span> <div>23</div> <div>元素2</div> </div> </body> </html> ~~~ ![](https://img.kancloud.cn/03/8b/038be70aa5b723ebac2627d71f28812f_197x103.png) * 如果限制元素 -- `outer` 下第一個元素且為div 的標簽字體顏色變紅，因為第一個子元素為span 標簽因此沒有變紅 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer> div:nth-child(1){ color: red; } </style> </head> <body> <div class="outer"> <span>元素1</span> <div>23</div> <div>元素2</div> </div> </body> </html> ~~~ ![](https://img.kancloud.cn/1b/6a/1b6aefb298d9f9ee1f07c1d3ea7309d4_195x86.png) * 想指定計算同類元素`:nth-of-type()`,整體用法規則和 **:nth-child()類似**，下面案例中意思是指定 `outer` 下類型是div的第一個子元素字體變紅 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer> div:nth-of-type(1){ color: red; } </style> </head> <body> <div class="outer"> <span>元素1</span> <div>23</div> <div>元素2</div> </div> </body> </html> ~~~ ![](https://img.kancloud.cn/07/d5/07d5e642f3281640cfdc60ab23f10610_183x71.png) >[danger] ##### root 和 empty ~~~ 1. `:root`，根元素，就是HTML元素 2 `:empty` 代表里面完全空白的元素,當元素內部為空例如<div></div> ~~~ * 案例 ~~~ :root{ color: brown; } '等同于' html{ color: brown; } ~~~ >[danger] ##### 否定偽類 * `:not(x)`表示**除x以外的元素**,x 表示為元素選擇器、通用選擇器、屬性選擇器、類選擇器、id選擇器、偽類