CSS_选择符
2016-10-28
《CSS入門(mén)經(jīng)典》第五章
以下提示注意事項(xiàng)：
1.如何選擇使用id選擇符還是class選擇符：當(dāng)確信id選擇符在頁(yè)面的唯一性時(shí)，就可以使用id選擇符。
2.通用選擇符在所有元素上設(shè)置樣式，并不是只設(shè)置繼承的默認(rèn)值。
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>筆記</title> 6 <style> 7 *{ 8 color: green; 9 } 10 h1{ 11 color: blue; 12 } 13 </style> 14 </head> 15 <body> 16 <h1>This is <em>very</em> important</h1> 17 </body> 18 </html>?
注意：使用通用選擇符，<em>標(biāo)簽里的內(nèi)容顯示為綠色，而不是<h1>標(biāo)簽的藍(lán)色，它沒(méi)有繼承h1標(biāo)簽的樣式。
更改代碼：
1 <style> 2 body{ 3 color: green; 4 } 5 h1{ 6 color: blue; 7 } 8 </style>?
此時(shí)em繼承了h1的樣式。
3.注意后代選擇器與子選擇器的區(qū)別。（另總結(jié)）
4.簡(jiǎn)單偽類(lèi)：
（1）：active 被激活的元素（例如激活的鏈接）。
（2）：first-child 元素的第一個(gè)子元素。
（3）：focus 有焦點(diǎn)的元素（例如接收輸入的表單字段）。
（4）：hover 指向的元素（例如通過(guò)鼠標(biāo)）。
（5）：lang（） 特定語(yǔ)言的樣式。
（6）：link 未跟蹤的鏈接。
（7）：visited 以前訪問(wèn)過(guò)的鏈接。
注意：
(1) 將偽類(lèi)和其他的類(lèi)和偽類(lèi)放在一起使用時(shí)，中間不要留空格，只有.和:指示符。
?eg?? a.offsite:link{color:green;}
(2) link偽類(lèi)和visited偽類(lèi)經(jīng)常一起使用，用link偽類(lèi)設(shè)置鏈接未訪問(wèn)時(shí)的樣式，用visited設(shè)置鏈接訪問(wèn)后的樣式。
(3) ：first-child偽類(lèi)用于選擇元素，選擇的元素是另一個(gè)元素的第一個(gè)子代。如果第一個(gè)子代匹配選擇符的基本類(lèi)型。（：first-child 偽類(lèi)前面的部分），那么將規(guī)則應(yīng)用于該元素。
eg:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>筆記</title> 6 <style> 7 body{ 8 color: green; 9 } 10 h1{ 11 color: blue; 12 } 13 #content p:first-child{ 14 background-color: silver; 15 font-size: x-large; 16 17 } 18 </style> 19 </head> 20 <body> 21 <h1>李白</h1> 22 <div id="content"> 23 <p>明月出天山，蒼茫云海間。 24 長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門(mén)關(guān)。 25 漢下白登道，胡窺青海灣。 26 由來(lái)征戰(zhàn)地，不見(jiàn)有人還。 27 戍客望邊邑，思?xì)w多苦顏。 28 高樓當(dāng)此夜，嘆息未應(yīng)閑。</p> 29 <p>...</p> 30 <p>...</p> 31 </div> 32 </body> 33 </html>?
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-child在IE8和更早版本IE版本中必須聲明<!DOCTYPE>
ie7.0以前的瀏覽器是不支持first-child選擇器的，所以使用class給特定元素設(shè)置樣式。
（4）：lang（）偽類(lèi)
指示規(guī)則應(yīng)用于匹配某種語(yǔ)言的元素；
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>筆記</title> 6 <style> 7 :lang(en-uk) { 8 background-color: #ccccff; 9 }; 10 </style> 11 </head> 12 <body> 13 <p>He cried out in a bad Monty Python imitation, 14 <span lang="en-uk">He's pinin for the fjords!</span> 15 </p> 16 </body> 17 </html>5.CSS中的偽元素
：before 插入元素前的內(nèi)容
：after 插入元素后的內(nèi)容
：first-letter 塊元素的第一個(gè)字母
：first-line 塊元素的第一行
（1）：first-line偽元素是虛擬偽元素，它只添加應(yīng)用于首行的特殊樣式指示元素的首行。
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>筆記</title> 6 <style> 7 p:first-line{ 8 background-color: green; 9 } 10 </style> 11 </head> 12 <body> 13 <p>《蝴蝶效應(yīng)》是一部由埃里克·布雷斯、J·麥凱伊·格魯伯執(zhí)導(dǎo)，艾什頓·庫(kù)徹、艾米·斯馬特、約翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻驚悚電影，于2004年1月23日在美國(guó)正式上映。電影講述伊萬(wàn)（艾什頓·庫(kù)奇 飾）在小時(shí)候經(jīng)歷了一系列糟糕的事情，損壞了他原本完美的人生。
在童年可怕記憶的折磨下，伊萬(wàn)請(qǐng)求心理醫(yī)生的幫助，醫(yī)生鼓勵(lì)他把發(fā)生的事情一件件詳細(xì)記下來(lái)，但是事情變得越來(lái)越糟糕。 14 </p> 15 </body> 16 </html>
注意：當(dāng)瀏覽器窗口，字體的大小改變時(shí)，設(shè)置的css樣式同樣能適用。所以<span>標(biāo)簽不能復(fù)制first-line。因?yàn)楫?dāng)它顯示在用戶瀏覽器上時(shí)，網(wǎng)頁(yè)作者不知道首行 在哪里結(jié)束。
（2）:first-letter偽元素可以為塊元素的首個(gè)字母添加特定的樣式。
eg：
1 <style> 2 p:first-letter{ 3 background-color: green; 4 } 5 </style>?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇： JS_理解函数参数按值传递
- 下一篇： CSS图片水平垂直居中