當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS_选择符

發布時間：2023/12/2 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS_选择符小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2016-10-28

《CSS入門經典》第五章

以下提示注意事項：

1.如何選擇使用id選擇符還是class選擇符：當確信id選擇符在頁面的唯一性時，就可以使用id選擇符。

2.通用選擇符在所有元素上設置樣式，并不是只設置繼承的默認值。

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>標簽里的內容顯示為綠色，而不是<h1>標簽的藍色，它沒有繼承h1標簽的樣式。

更改代碼：

1 <style> 2 body{ 3 color: green; 4 } 5 h1{ 6 color: blue; 7 } 8 </style>

此時em繼承了h1的樣式。

3.注意后代選擇器與子選擇器的區別。（另總結）

4.簡單偽類：

（1）：active 被激活的元素（例如激活的鏈接）。

（2）：first-child 元素的第一個子元素。

（3）：focus 有焦點的元素（例如接收輸入的表單字段）。

（4）：hover 指向的元素（例如通過鼠標）。

（5）：lang（）特定語言的樣式。

（6）：link 未跟蹤的鏈接。

（7）：visited 以前訪問過的鏈接。

注意：

(1) 將偽類和其他的類和偽類放在一起使用時，中間不要留空格，只有.和:指示符。

?eg?? a.offsite:link{color:green;}

(2) link偽類和visited偽類經常一起使用，用link偽類設置鏈接未訪問時的樣式，用visited設置鏈接訪問后的樣式。

(3) ：first-child偽類用于選擇元素，選擇的元素是另一個元素的第一個子代。如果第一個子代匹配選擇符的基本類型。（：first-child 偽類前面的部分），那么將規則應用于該元素。

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 長風幾萬里，吹度玉門關。 25 漢下白登道，胡窺青海灣。 26 由來征戰地，不見有人還。 27 戍客望邊邑，思歸多苦顏。 28 高樓當此夜，嘆息未應閑。</p> 29 <p>...</p> 30 <p>...</p> 31 </div> 32 </body> 33 </html>

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

選擇器?chrome?IE?FirefoxSafari?Opera

:first-child

4.0

7.0

3.0

3.1

9.6

注意: :first-child在IE8和更早版本IE版本中必須聲明<!DOCTYPE>

ie7.0以前的瀏覽器是不支持first-child選擇器的，所以使用class給特定元素設置樣式。

（4）：lang（）偽類

指示規則應用于匹配某種語言的元素；

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 插入元素前的內容

：after 插入元素后的內容

：first-letter 塊元素的第一個字母

：first-line 塊元素的第一行

（1）：first-line偽元素是虛擬偽元素，它只添加應用于首行的特殊樣式指示元素的首行。

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>《蝴蝶效應》是一部由埃里克·布雷斯、J·麥凱伊·格魯伯執導，艾什頓·庫徹、艾米·斯馬特、約翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻驚悚電影，
于2004年1月23日在美國正式上映。電影講述伊萬（艾什頓·庫奇飾）在小時候經歷了一系列糟糕的事情，損壞了他原本完美的人生。
在童年可怕記憶的折磨下，伊萬請求心理醫生的幫助，醫生鼓勵他把發生的事情一件件詳細記下來，但是事情變得越來越糟糕。 14 </p> 15 </body> 16 </html>

注意：當瀏覽器窗口，字體的大小改變時，設置的css樣式同樣能適用。所以<span>標簽不能復制first-line。因為當它顯示在用戶瀏覽器上時，網頁作者不知道首行在哪里結束。

（2）:first-letter偽元素可以為塊元素的首個字母添加特定的樣式。

eg：

1 <style> 2 p:first-letter{ 3 background-color: green; 4 } 5 </style>

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS_选择符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。