1、屬性選擇器
-
說明
選取標(biāo)簽帶有某些特殊屬性的選擇器
-
常用
選擇符 描述 E[attr] 選擇具有attr屬性的E元素 E[attr="val"] 選擇具有attr屬性且屬性值等于val的E元素 E[attr^="val"] 選擇具有attr屬性且屬性值以val開頭的E元素 E[attr$="val"] 選擇具有attr屬性且屬性值以val結(jié)尾的E元素 E[attr*="val"] 選擇具有attr屬性且屬性值含有val的E元素
-
E[attr]選擇器選擇具有attr屬性的E元素
舉例：
<style> button{ color: red; } button[disabled]{ color: #cccccc; } </style> <button>Button</button> <button>Button</button> <button disabled='disabled'>Button</button> <button disabled='disabled'>Button</button> -
E[attr="val"]選擇器選擇具有attr屬性且屬性值等于val的E元素
舉例：
<style> input[type='search']{ color: pink; } </style> <input type="text" value="文本框" /> <input type="text" value="文本框" /> <input type="search" value="搜索框" /> <input type="search" value="搜索框" />
-
E[attr^="val"]選擇器選擇具有attr屬性且屬性值以val開頭的E元素
舉例：
<style> div[cladd^='']{ color: pink; } </style> <div class="font12">屬性選擇器</div> <div class="font24">屬性選擇器</div> <div class="font24">屬性選擇器</div>
-
E[attr$="val"]選擇器選擇具有attr屬性且屬性值以val結(jié)尾的E元素
舉例：
div[cladd$='4']{ color: pink; }
-
E[attr*="val"]選擇器選擇具有attr屬性且屬性值含有val的E元素
舉例：
div[cladd*='2']{ color: pink; } -
注意
類選擇器、屬性選擇器、偽類選擇器權(quán)重都為10
2、結(jié)構(gòu)偽類選擇器
-
常用
選擇符 描述 E:first-child 選擇父元素中的第一個子元素E E:last-child 選擇父元素中的最后一個子元素E E:nth-child(n) 選擇父元素中的第n個子元素E E:first-of-type 選擇指定類型E的第一個 E:last-of-type 選擇指定類型E的最后一個 E:nth-of-type 指定類型E的第n個
-
:first-child選擇器表示選擇父元素的第一個子元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
舉例：
ol > li:first-child{ color: red; } -
:last-child選擇器選擇的是元素的最后一個子元素。比如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器。
舉例：
ol > li:last-child{ color: red; } -
:nth-child(n)選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數(shù)，不僅可以是整數(shù)值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關(guān)鍵詞(odd 奇數(shù)、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時，選擇器將選擇不到任何匹配的元素。
舉例：
ol li:nth-child(even){ background: orange; } -
注意
選擇父元素里面的第n個孩子，不管父元素里面是否是同一種類型。
-
:empty選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格。
舉例：
p{ background: orange; min-height: 30px; } p:empty { display: none; } -
:root選擇器從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
:root{ background:pink; } /*等同于*/ html {background:pink;}
-
:nth-last-child(n)選擇器從最后一個開始算索引。
舉例：
ol > li:nth-last-child(1){ color: blue; }
-
E:first-of-type選擇器匹配同級兄弟元素中的第一個E元素，of-type 選擇指定類型的元素
舉例：
div span:first-of-type{ background-color: yellowgreen; }<div> <p>p標(biāo)簽</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div>
-
E:last-of-type選擇器匹配同級兄弟元素中的最后一個E元素，of-type 選擇指定類型的元素
舉例：
div span:last-of-type{ background-color:rebeccapurple; }<div> <p>p標(biāo)簽</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div>
-
E:nth-of-type選擇器匹配同級兄弟元素中的最后一個E元素，of-type 選擇指定類型的元素
舉例：
div span:nth-of-type(2){ background-color: blue; }<div> <p>p標(biāo)簽</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div> -
注意
ul 里面中允許放li，所以nth-child和nth-of -type是一樣的
偽類選擇器權(quán)重為10
3、偽元素選擇器
-
常用
選擇符 描述 ::before 在元素內(nèi)容的前面插入內(nèi)容 ::after 在元素內(nèi)容的后面插入內(nèi)容 ::first-letter 選擇文本的第一個單詞或字（如中文、日文、韓文等） ::first-line 選擇文本第一行 ::selection 選擇可選中的文本添加樣式
E::before和E::after
-
說明
在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為==行內(nèi)元素==，且必須要結(jié)合content屬性使用，因為在dom中看不見創(chuàng)建的元素，所以稱為偽元素。
-
語法
div::befor { content:"開始"; } div::after { content:"結(jié)束"; } -
注意
E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
偽元素和標(biāo)簽選擇器一樣，權(quán)重為1
E::first-letter
-
說明
文本的第一個單詞或字（如中文、日文、韓文等）
-
語法
p::first-letter { font-size: 20px; color: hotpink; }
E::first-line
-
說明
文本第一行
-
語法
/* 首行特殊樣式 */ p::first-line { color: skyblue; }
E::selection
-
說明
可改變選中文本的樣式
-
語法
p::selection { /* font-size: 50px; */ color: orange; }
