CSS選擇器（上）

選擇器類型：

基礎(chǔ)選擇器

• *：通用元素選擇器稀余，匹配頁面任何元素（這也就決定了我們很少使用）
• /#id：id選擇器征峦，匹配特定的id元素
• .class：類選擇器庆捺，匹配class包含（不是等于）特定類的元素
• element：標(biāo)簽選擇器
• 組合選擇器
  • E丰榴，F(xiàn)：多元素選擇器勿负，用嫡意，分隔举瑰，同時(shí)匹配元素E或元素F
  • EF：后代選擇器，用空格分割蔬螟，匹配E元素所有的后代（不只是子元素此迅、子元素向下遞歸）元素F
  • E>F：子元素選擇器，用>分隔旧巾，匹配E元素的所有直接子元素
  • E+F：直接相鄰選擇器耸序，匹配E元素之后的相鄰的同級(jí)元素F
  • E～F：普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）
  • .class1.class2：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符鲁猩，.和#本身充當(dāng)分隔符的元素
  • element#id：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符坎怪，.和#本身充當(dāng)分隔符的元素
• 屬性選擇器
  • E[attr]：匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
  • E[attr = value]：匹配屬性attr值為value的元素廓握，
  • div[id=test]搅窿，匹配id=test的div
  • E[attr ~= value]：匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素
  • E[attr ^= value]：匹配屬性attr的值以value開頭的元素
  • E[attr $= value]：匹配屬性attr的值以value結(jié)尾的元素
  • E[attr *= value]：匹配屬性attr的值包含value的元素
• 偽類選擇器：一個(gè)元素的另外一種狀態(tài)
  • E:first-child：匹配元素E的第一個(gè)子元素
  • E:link：匹配所有未被點(diǎn)擊的鏈接
  • E:visited：匹配所有已被點(diǎn)擊的鏈接
  • E:active：匹配鼠標(biāo)已經(jīng)其上按下還沒有釋放的E元素
  • E:hover：匹配鼠標(biāo)懸停其上的E元素
  • E:focus：匹配獲得當(dāng)前焦點(diǎn)的E元素
  • E:lang?：匹配lang屬性等于c的E元素
  • E:enabled：匹配表單中可用的元素
  • E:disabled：匹配表單中禁用的元素
  • E:checked：匹配表單中被選中的radio或checkbox元素
  • E::selection：匹配用戶當(dāng)前選中的元素
  • E:root：匹配文檔的根元素隙券，對(duì)于HTML文檔男应，就是HTML元素
  • E:nth-child(n)：匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
  • E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個(gè)子元素娱仔，第一個(gè)編號(hào)為1
  • E:nth-of-type(n)：與:nth-child()作用類似沐飘，但是僅僅匹配使用同種標(biāo)簽的元素
  • E:nth-last-of-type(n)：與:nth-last-child()作用類似，但是僅僅匹配使用同種標(biāo)簽的元素
  • E:last-child：匹配父元素的最后一個(gè)子元素拟枚，等同于:nth-last-child(1)
  • E:first-of-type：匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素薪铜，等同于:nth-of-type(1)
  • E:last-of-type：匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
  • E:only-child：匹配父元素下僅有的一個(gè)子元素恩溅，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
  • E:only-of-type：匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素隔箍，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
• 注意順序，樣式覆蓋
  • n的取值：1脚乡，2蜒滩，3滨达，4；2n+1俯艰，2n捡遍；odd，even
• 偽元素選擇器
  • E::first-line：匹配E元素內(nèi)容的第一行
  • E::first-letter：匹配E元素內(nèi)容的第一個(gè)字母
  • E::before：在E元素之前插入生成的內(nèi)容
  • E::after：在E元素之后插入生成的內(nèi)容
  • 偽元素必須要有content
  • 為了簡化標(biāo)簽竹握，如果想要拼一個(gè)圖案画株，用HTML比較浪費(fèi)
• 選擇器優(yōu)先級(jí)
  • 在屬性后面有！important會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
  • 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
  • id選擇器
  • 類選擇器
  • 偽類選擇器
  • 屬性選擇器
  • 標(biāo)簽選擇器
  • 通配符選擇器
  • 瀏覽器自定義
  • 復(fù)雜場景
    • 行內(nèi)樣式—a
    • id選擇器—b
    • 類啦辐，屬性谓传，偽類選擇器—c
    • 標(biāo)簽選擇器，偽元素—d
    • 從a開始比芹关，大的權(quán)重高
    • 樣式覆蓋
• 選擇器使用規(guī)范
  • 不要隨便使用標(biāo)簽選擇器续挟，使用合適的命名空間
  • 合理抽象出通用樣式