詳解CSS中的選擇器

2020-03-24 16:40:26

字體：大中小

來源：轉載

供稿：網友

1、通配符選擇器

通配符選擇器用“* 號表示，是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素

/*設置當前頁面中所有標簽的顏色為紅色*/* {color: red;}

2、標簽選擇器

標簽選擇器就是選擇當前頁面中相同名字的標簽

/*設置所有p標簽的文字顏色為紅色*/p {color: red;}

3、ID選擇器

id選擇器使用 # 進行標識，后面緊跟id名

{:;}

 h1 id= title 這是標題 /h1

注意HTML標簽中ID的屬性值在一個頁面中必須是唯一的（是W3C規范而不是硬性規則）。

ID選擇器命名規范

只允許出現字母（大小寫均可，嚴格區分）、下劃線、數字，也就是說，id=”Head”和 id=”head”不沖突

只允許以字母開頭

命名沒有長度限制，可以是1個字母，也可以是很多個，不過不建議太長

不允許出現標簽名（不是硬性規定)

4、類選擇器

類選擇器就是選取頁面中所有標簽的html' target='_blank'>class屬性值相同的一類標簽，用.（點）表示

{:;}

h1 >

一個標簽可以包含多個類選擇器，在class標簽中用空格隔開。

.head {color: blue;}.subHead {font-size: 50px;}

h2 >5、復合選擇器5.1、交集選擇器

交集選擇器又稱標簽指定式選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如

h3.special /* 需要滿足標簽是h3同時擁有special類 */

或

p#one /* 需要滿足標簽是p同時id為one */

5.2、并集選擇器

并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSSyangshi_10628_1.html' target='_blank'>CSS樣式

/*同時給標簽h3與class為box的元素設置樣式*/h3, .box {color: red;font-size: 14px;}

5.3、后代選擇器

后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代（后代不僅僅包括兒子，還包括子子孫孫）。

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title Document /title 6 7 style type= text/css 8 .province li { 9 color: red;10 }11 /style 12 /head 13 body 14 div >

頁面顯示效果

5.4、子代選擇器

子代選擇器與后代選擇器的區別在于，子代選擇器只選擇兒子級別的元素

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title Document /title 6 7 style type= text/css 8 div strong { 9 color: red;10 }11 /style 12 /head 13 body 14 div 15 strong 直接子標簽 /strong 16 span 17 strong 間接子標簽 /strong 18 /span 19 /div 20 /body 21 /html

頁面顯示效果

可以看到包裹在span標簽中的文字顏色不變。

5.5、相鄰選擇器

h1 + p {margin-top:50px;}表示增加緊接在 h1 元素后出現的段落的上邊距。

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 相鄰選擇器 /title 6 7 style type= text/css 8 li + li {font-weight:bold;} 9 /style 10 /head 11 body 12 div 13 ul 14 li List item 1 /li 15 li List item 2 /li 16 li List item 3 /li 17 /ul 18 ol 19 li List item 1 /li 20 li List item 2 /li 21 li List item 3 /li 22 /ol 23 /div 24 /body 25 /html

瀏覽器運行結果：

li+li選擇的是第二個li，同理也可以理解成緊跟著第二個li的兄弟，即是第三個li，當然是在同一個級別下。

6、屬性選擇器

屬性選擇器就是根據html標簽的屬性進行過濾選擇

6.1、簡單屬性選擇

格式：標簽名[屬性名稱1][屬性名稱2][...]{樣式...}，屬性名稱可以一個到多個

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 簡單屬性選擇 /title 6 7 style type= text/css 8 /*選擇具有class屬性的div*/ 9 div[class] {10 color: red;11 }12 13 /*選擇同時具有id屬性與class屬性的div*/14 div[id][class] {15 background-color: green;16 }17 /style 18 /head 19 body 20 div 普通div /div 21 div >

6.2、屬性值選擇

格式：標簽名[屬性= 屬性值 ]{樣式...}，同樣的，屬性= 屬性值可以有多個

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 屬性值選擇 /title 6 7 style type= text/css 8 /*選擇 >

6.3、屬性名全包含

格式：標簽名[屬性名~= 屬性值 ]{樣式...}，選取屬性名中包含屬性值的標簽，同樣的，屬性名~= 屬性值可以有多個

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 屬性名全包含 /title 6 7 style type= text/css 8 /*選擇class屬性包含box的div*/ 9 div[class~= box ] {10 font-size: 30px;11 color: green;12 }13 14 /*選擇id屬性包含box，同時class屬性包含content的div*/15 div[id~= box ][class~= content ] {16 background-color: red;17 }18 /style 19 /head 20 body 21 div >

可以看到屬性名~= 屬性值只要值中有一個包含就符合條件了

6.4、屬性模糊選擇

格式：屬性模糊選擇有兩種格式，分別為

標簽名[屬性^= 屬性值 ]{樣式...}，如div[id^= box ]，表示選擇具有id屬性且屬性值為以box開頭的字符串的div元素；

標簽名[屬性$= 屬性值 ]{樣式...}，如div[id$= box ]，表示選擇具有id屬性且屬性值為以box結尾的字符串的div元素。

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 屬性模糊選擇 /title 6 7 style type= text/css 8 /*選擇class屬性以box開頭的div*/ 9 div[class^= box ] {10 font-size: 30px;11 color: blue;12 }13 14 /*選擇class屬性以content結尾的div*/15 div[class$= content ] {16 background-color: purple;17 }18 /style 19 /head 20 body 21 div 普通div /div 22 div >

6.5、屬性模糊匹配包含

格式：標簽名[屬性*= 屬性值 ]{樣式...}，與屬性名全包含不同的是，*表示只要包含就可以，如div[id*= box ]表示id屬性包含box的div標簽

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 屬性模糊匹配包含 /title 6 7 style type= text/css 8 /*選擇class屬性包含box的div*/ 9 div[class*= box ] {10 font-size: 30px;11 color: green;12 }13 /style 14 /head 15 body 16 div >

7、偽類選擇器

CSS 偽類用于向某些選擇器添加特殊的效果

:link

應用于未被訪問過的鏈接。IE6不兼容，解決此問題，直接使用a標簽。

:visited

應用于已經被訪問過的鏈接

:hover

應用于有鼠標指針懸停于其上的元素。在IE6只能應用于a連接，IE7+所有元素都兼容。

:active

應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。

:focus

應用于擁有鍵盤輸入焦點的元素。

以a標簽為例

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 偽類 /title 6 style 7 a:link { 8 color: red; 9 }10 11 a:visited {12 color: green;13 }14 15 a:hover {16 background-color: blue;17 }18 19 a:active {20 background-color: yellow;21 }22 23 a:focus {24 font-size: 30px;25 }26 /style 27 /head 28 body 29 a href= # 偽類的應用鏈接 /a 30 /body 31 /html

注意偽類的書寫順序為:link，:visited，:hover，:active，否則有可能會達不到預期的效果。

如果需要重復測試效果，需要清除瀏覽器緩存。

8、偽元素選擇器

CSS 偽元素用于向某些選擇器設置特殊效果。

8.1、:first-line 偽元素

first-line 偽元素用于向文本的首行設置特殊樣式。注意 first-line 偽元素只能用于塊級元素，下面的屬性可應用于 first-line 偽元素：font、color、background、word-spacing、 letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS偽元素first-line /title 6 7 style type= text/css 8 p:first-line { 9 color:#ff0000;10 font-size:xx-large;11 }12 /style 13 /head 14 body 15 p 16 這是一個段落這是一個段落這是一個段落17 這是一個段落這是一個段落這是一個段落18 這是一個段落這是一個段落這是一個段落19 /p 20 /body 21 /html

8.2、:first-letter 偽元素

first-letter 偽元素用于向文本的首字母設置特殊樣式。注意 first-letter 偽元素只能用于塊級元素。下面的屬性可應用于 first-letter 偽元素：font、color、background、margin、 padding、border、text-decoration、vertical-align (僅當 float 為 none 時)、text-transform、line-height、float、clear

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS偽元素first-letter /title 6 style type= text/css 7 p:first-letter { 8 color:#ff0000; 9 font-size:xx-large;10 }11 /style 12 /head 13 body 14 p 15 這是一個段落這是一個段落這是一個段落16 這是一個段落這是一個段落這是一個段落17 這是一個段落這是一個段落這是一個段落18 /p 19 /body 20 /html

8.3、:before 偽元素

:before 偽元素可以在元素的內容前面插入新內容，一般配合content使用

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS偽元素before /title 6 style type= text/css 7 p:before { 8 content: @@@ 9 }10 /style 11 /head 12 body 13 p 14 這是一個段落這是一個段落這是一個段落15 這是一個段落這是一個段落這是一個段落16 這是一個段落這是一個段落這是一個段落17 /p 18 /body 19 /html

8.4、:after 偽元素

與:before偽元素相反， :after 偽元素可以在元素的內容之后插入新內容

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS偽元素after /title 6 style type= text/css 7 p:after { 8 content: @@@ 9 }10 /style 11 /head 12 body 13 p 14 這是一個段落這是一個段落這是一個段落15 這是一個段落這是一個段落這是一個段落16 這是一個段落這是一個段落這是一個段落17 /p 18 /body 19 /html

8.5、偽元素和 CSS 類

偽元素可以與 CSS 類配合使用

1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS偽元素和CSS類的結合 /title 6 style type= text/css 7 p.artical:first-letter { 8 color:#ff0000; 9 font-size:xx-large;10 }11 /style 12 /head 13 body 14 p 15 這是一個段落這是一個段落這是一個段落16 這是一個段落這是一個段落這是一個段落17 這是一個段落這是一個段落這是一個段落18 /p 19 p >

8.6、多重偽元素

可以結合多個偽元素來使用

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS多重偽元素 /title 6 7 style type= text/css 8 p:first-letter { 9 color:#ff0000;10 font-size:xx-large;11 }12 13 p:first-line {14 color:#0000ff;15 }16 /style 17 /head 18 body 19 p 20 這是一個段落這是一個段落這是一個段落21 這是一個段落這是一個段落這是一個段落22 這是一個段落這是一個段落這是一個段落23 /p 24 /body 25 /html