復合選擇器 · CSS

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，目的是為了可以選擇更準確的目標元素標簽。 [toc] ## 1. 交集選擇器交集選擇器是并且的意思，交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，語法如下： ```css p.one {...} ? 選擇的是：類名為 .one 的段落標簽。 ? ``` 用的相對來說比較少，不太建議使用。 <br/> ## 2. 并集選擇器并集選擇器是各個選擇器通過**逗號**連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。語法如下： ```css .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。通常用于集體聲明。 ``` <br/> ## 3. 后代選擇器后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用**空格**分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。語法如下： ```css .class h3 {...}; 子孫后代都可以這么選擇。或者說，它能選擇任何包含在內的標簽。 ``` <br/> ## 4. 子元素選擇器子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個```> ```進行連接，注意，符號左右兩側各保留一個空格。語法如下： ```css .demo > h3 {color: red;} 說明 h3 必須.demo的親兒子。 ``` 必須是親兒子，不能是孫子、重孫子之類。 <br/> ## 5. 偽類選擇器偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，可以選擇第1個，第n個元素。 <br/> ### 5.1 鏈接偽類選擇器 * ```:link /*未訪問的鏈接 */``` * ```:visited /*已訪問的鏈接 */``` * ```:hover /* 鼠標移動到鏈接上 */``` * ```:active / *選定的鏈接 */``` 注意寫的時候，他們的順序盡量不要顛倒按照 lvha 的順序。 ```css a { ? /* a是標簽選擇器所有的鏈接 */ font-weight: 700; font-size: 16px; color: gray; } a:hover { ? /* :hover 是鏈接偽類選擇器鼠標經過 */ color: red; /* 鼠標經過的時候，由原來的灰色變成了紅色 */ } ``` <br/> ### 5.2 位置偽類選擇器 :first-child、:last-child 、 :nth-child(n)、:nth-last-child(n) 具體用法查看CSS手冊。 ### 5.3 目標偽類選擇器 :target，具體用法查看手冊。 ### 5.4 屬性選擇器類似于 div[class^=font]，具體用法查看手冊。 ### 5.5 偽元素選擇器 1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等） 2. E::first-line 文本第一行； 3. E::selection 可改變選中文本的樣式； 4. E::before和E::after 在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用。 **`html\偽元素選擇器.html`** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span::before { content: "楚喬是"; /* 添加的內容默認為行內元素 */ } span::after { content: "的"; } </style> </head> <body> <span>燕洵</span> </body> </html> ``` * E:after、E:before 在舊版本里是偽元素，CSS3的規范里`:`用來表示偽類，`::`用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。 * `:` 與 `::`區別在于區分偽類和偽元素之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行為與真正的頁面元素一樣，但實際上是css樣式展現的行為，因此被稱為偽元素。在html頁面中是無法對偽元素的結構進行審查的。