偽類和偽元素
有時候，你需要選擇本身沒有標簽，但是仍然易於識別的網頁部位，比如段落首行或鼠標滑過的連接。CSS為他們提供一些選擇器：偽類和偽元素。
常用的一些偽類選擇器：
| :link | :visited | :hover | :active |
| 表示普通的鏈接（沒訪問過的鏈接） | 表示訪問過的鏈接 瀏覽器是通過歷史記錄來判斷一個鏈接是否訪問過, |
表示鼠標移入的狀態 | 超鏈接被點擊的狀態 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 未點擊過的超鏈接顏色為黃綠色 */ a:link{ color: yellowgreen; } /* 點擊過的超鏈接顏色為紅色 */ a:visited{ color: red; } /* 鼠標停留（未點擊）在超鏈接顏色為天空藍色 */ a:hover{ color: skyblue; } /* 點擊時超鏈接的顏色為黑色 */ a:active{ color: black; } </style> </head> <body> <a href="http://www.baidu.com">一個網站</a> </body> </html>
以上四個偽類優先級是一樣的，所以執行要有一定的順序，一定要遵循
link→visit→hover→active
順序，如果不遵循上述會使偽類失效。
其他的偽類選擇器：
| :focus | :selection | – :before | – :after |
| 獲取焦點后進行選擇操作 | 被選定后進行的選擇操作 這個偽類在火狐中需要采用另一種方式編寫: :-moz-selection |
指定元素前 | 指定元素后 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 文本框獲取焦點以后，修改背景顏色為黃色 */ input:focus{ background-color: yellow; } /* * 為p標簽中選中的內容使用樣式 * 可以使用::selection為類 * 注意：這個偽類在火狐中需要采用另一種方式編寫::-moz-selection */ /** * 兼容火狐的 */ p::-moz-selection{ background-color: orange; } /** * 兼容大部分瀏覽器的 */ p::selection{ background-color: orange; } </style> </head> <body> <p>我是一個段落</p> <!-- 使用input可以創建一個文本輸入框 --> <input type="text" /> </body> </html>
– :before和– :after
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * :before表示元素最前邊的部分 * 一般before都需要結合content這個樣式一起使用， * 通過content可以向before或after的位置添加一些內容 * * :after表示元素的最后邊的部分 */ p:before{ content: "我會出現在整個段落的最前邊"; color: red; } p:after{ content: "我會出現在整個段落的最后邊"; color: orange; } </style> </head> <body> <p> 我家是荒涼的。 一進大門，靠着大門洞子的東壁是三間破房子，靠着大門洞子的西壁仍是三間破房子。再加上一個大門洞，看起來是七間連着串，外表上似乎是很威武的，房子都很高大，架着很粗的木頭的房架。柁頭是很粗的，一個小孩抱不過來。都一律是瓦房蓋，房脊上還有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的兩梢上，一邊有一個鴿子，大概也是瓦做的。終年不動，停在那里。這房子的外表，似乎不壞。 </p> </body> </html>
需要注意的是偽類選擇器加入的文本是CSS樣式，是無法選定的。
偽元素
| :first-letter | :first-line |
| 為元素中中第一個字符來設置一個特殊的樣式 | 為元素中的第一行設置一個背景顏色為黃色 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 使用偽元素來表示元素中的一些特殊的位置 */ /* * 為p中第一個字符來設置一個特殊的樣式 */ p:first-letter { color: red; font-size: 20px; } /* * 為p中的第一行設置一個背景顏色為黃色 */ p:first-line { background-color: yellow; } </style> </head> <body> <p>我家是荒涼的。 一進大門，靠着大門洞子的東壁是三間破房子，靠着大門洞子的西壁仍是三間破房子。再加上一個大門洞，看起來是七間連着串，外表上似乎是很威武的，房子都很高大，架着很粗的木頭的房架。柁頭是很粗的，一個小孩抱不過來。都一律是瓦房蓋，房脊上還有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的兩梢上，一邊有一個鴿子，大概也是瓦做的。終年不動，停在那里。這房子的外表，似乎不壞。 </p> </body> </html>
屬性選擇器
可以根據元素中的屬性或屬性值來選取指定元素
* - 語法：
* [屬性名] 選取含有指定屬性的元素
* [屬性名="屬性值"] 選取含有指定屬性值的元素
* [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
* [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
* [屬性名*="屬性值"] 選取屬性值以包含指定內容的元素
title屬性，這個屬性可以給任何標簽指定。當鼠標移入到元素上時，元素中的title屬性的值將會作為提示文字顯示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 為所有具有title屬性的p元素，設置一個背景顏色為黃色 */ p[title]{ background-color: yellow; } /* * 為title屬性值是hello的元素設置一個背景顏色為黃色 */ p[title="hello"]{ background-color: yellow; } /* * 為title屬性值以ab開頭的元素設置一個背景顏色為黃色 */ p[title^="ab"]{ background-color: yellow; } /* * 為title屬性值以c結尾的元素設置一個背景顏色 */ p[title$="c"]{ background-color: yellow; } /* * 為title屬性值有c的元素設置一個背景顏色 */ p[title*="c"]{ background-color: yellow; } </style> </head> <body> <p title="hello">我是一個段落</p> <p>我是一個段落</p> <p title="hello">我是一個段落</p> <p title="abbc">我是一個段落</p> <p title="abccd">我是一個段落</p> <p title="abc">我是一個段落</p> </body> </html>
子元素選擇器
:first-child 可以選中第一個子元素
:last-child 可以選中最后一個子元素
:nth-child 可以選中任意位置的子元素
* 該選擇器后邊可以指定一個參數，指定要選中第幾個子元素
* even 表示偶數位置的子元素
* odd 表示奇數位置的子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*選中第一個為p標簽的子元素， p可以為空，默認為*通配符，表示所有 所以div中的p標簽也會被選中 */ p:first-child{ background-color: yellow; } /*如果不想選中所有第一個（其他同理）為p標簽的子元素，可以做一個限定*/ body > p:first-child{ background-color: yellow; } /*選中最后一個為p標簽的子元素 div中的p標簽既為第一個也為最后一個 */ p:last-child{ background-color: yellow; } /*選中第幾個為p標簽的子元素 括號中可以填數字，表示第幾。 或者填odd表示所有奇數，even表示所有偶數 */ p:nth-child(odd){ background-color: yellow; } </style> </head> <body> <span>我是span</span> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <span>hello</span> <div> <p>我是DIV中的p標簽</p> </div> </body> </html>
:first-of-type
* :last-of-type
* :nth-of-type
:first-child這些非常的類似，
* 只不過child，是在所有的子元素中排列
* 而type，是在當前類型的子元素中排列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 在所有p標簽中的第一個子元素 */ p:first-of-type{ background-color: yellow; } /* 在所有p標簽中的最后一個子元素 */ p:last-of-type{ </style> /* 在所有p標簽中的第幾個子元素 */ p:nth-of-type(3){ background-color: yellow; } </head> <body> <span>我是span</span> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <span>hello</span> </body> </html>
兄弟元素選擇器
可以選中一個元素后緊挨着的指定的兄弟元素
* 語法：前一個 + 后一個
選中后邊的所有兄弟元素
語法：前一個 ~ 后邊所有
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 選中span元素緊挨着的指定兄弟元素， 必須緊挨着，如果中間有其他元素則不生效 */ span + p{ background-color: yellow; } /* * 選中span后邊的所有兄弟元素 */ span ~ p{ background-color: yellow; } </style> </head> <body> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <span>我是一個span</span> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> </body> </html>
否定偽類
可以從已選中的元素中剔除出某些元素
語法：
* :not(選擇器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*去除p標簽中class是hello的元素*/ p:not(.hello){ background-color: yellow; } </style> </head> <body> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> <p class="hello">我是一個p標簽</p> <p>我是一個p標簽</p> <p>我是一個p標簽</p> </body> </html>
選擇器優先級
當使用不同的選擇器，選中同一個元素時並且設置相同的樣式時，
* 這時樣式之間產生了沖突，最終到底采用哪個選擇器定義的樣式，由選擇器的優先級（權重）決定
* 優先級高的優先顯示
優先級的規則
* 內聯樣式 ， 優先級 1000
* id選擇器，優先級 100
* 類和偽類， 優先級 10
* 元素選擇器，優先級 1
* 通配* ， 優先級 0
* 繼承的樣式，沒有優先級
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 當選擇器中包含多種選擇器時，需要將多種選擇器的優先級相加然后在比較,但是注意，選擇器優先級計算不會超過他的最大的數量級 */ #p2{ background-color: yellowgreen; } p#p2{ background-color: red; } .p3{ color: green; } /* 如果選擇器的優先級一樣，使用靠后的樣式。 */ .p1{ color: yellow; background-color: greenyellow; } .p3{ color: green; } /* 可以在樣式的最后，添加一個!important，則此時該樣式將會獲得一個最高的優先級， * 將會優先於所有的樣式顯示甚至超過內聯樣式，但是在開發中盡量避免使用!important*/ .p1{ color: yellow; background-color: greenyellow !important; } /* 並集選擇器的優先級是單獨計算 * div , p , #p1 , .hello{} */ </style> </head> <body> <p class="p1 p3" id="p2" style="background-color: orange;">我是一個段落 <span>我是p標簽中的span</span> </p> </body> </html