類
ID
* 通配符：選擇所有的子元素
子選擇器 >
后代選擇器 ：（空格）
同輩“弟弟選擇器” p~ul，這里的p和ul（們）有相同的父元素，
p和ul同輩且ul在p的后面就可以。選中的是ul（們）哦~~
相鄰選擇器 + ：
例：（div + p）選擇所有緊跟著div的p元素。注意選擇的是+后面的p元素，而且要是跟著div后面的第一個p，
<div>我是p前面的div</div>
<p>我被選中了</p>
<p>我沒被選中</p>
屬性選擇器
[target = "_blank"] 選擇target = "_blank"的所有元素
[title ~= "flower"] 選擇 所有title屬性 包含flower的所有元素。注意：這里的包含是指有空格分隔開的flower。
<div title="bird flower">鳥和花</div>
<div title="flowerbird">花鳥</div>
這里被選中的是鳥和花。
[lang|= "en"] 選擇的是lang屬性的屬性值以en或者en-開頭的所有元素。
[src ^= "https"] 選擇的是src以https開頭的所有元素
[src $= "pdf"] 選擇的是src以pdf結尾的所有元素
[src *= "https"] 選擇的是src包含“https”的所有元素。注意這里與上面“~”的區別，這里只要是包含https這個子串就可以。
偽類：首先要聲明的是偽類只是元素扮演的某種角色或者說經歷的某種狀態，被選擇的還是元素本身。
a:link 和a:visited 分別代表未被訪問過的連接和已經訪問過的連接。
而：hover 和：active 分別代表 鼠標懸浮于連接之上和鏈接被點擊
：hover不僅僅適用于a標簽，也適用于其他的元素。
：focus 表示元素獲取焦點 多用于input。
p:first-of-type 選擇的這個p元素是他父元素下面p元素中的第一個。
類似的還有p：last-of-type 選擇的就是父元素里面的p元素中的最后一個。
p：only-of-type 選擇的是這個p是其父元素下面唯一的一個p元素，該父元素可以有其他的元素，但是p除外。
這三個里面都有個type（類型），也就是說這三個選擇器描述的都是在同類型中的相對位置。
p:first-child/:last-child 選擇 首先是p元素，第二，是其父元素的第一/最后一個子元素。
p：only-child 選擇的是 這個p是他父元素唯一的子元素，那么選擇他，兩個條件：首先要是p元素，第二要是其父元素的唯一子元素。
p：nth-child（n）要滿足兩個條件。第一是p元素，第二是其父元素的第n個子元素。
p：nth-last-child（n） 和上面一樣，但是是從父元素的最后一個子元素開始計數。
p：nth-of-type（n） 第一是p元素，第二 這個p元素在其同輩的p元素集合里面排在第n位。
p：nth-last-of-type（n）和上面一樣，但是在同輩p元素集合中反著數。
:root 選擇的是文檔的根元素。
：empty 選擇的是沒有子元素的元素（包括文本節點）。
：not（selector）
例： ：not（p）
選擇非<p>元素的所有元素。
::selection
選擇被用戶選取的元素部分。
偽元素
::first-letter 第一個字母（只能用于塊級元素）
::first-line 第一行 （只能用于塊級元素）
::before
::after
