CSS-複合選擇器 隨學筆記
阿新 • • 發佈：2021-10-24
CSS複合選擇器：
複合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。
複合選擇器可以更準確、更搞笑的選擇目標元素（標籤）；
複合選擇器是有兩個或多個基礎選擇器，通過不同的方式組合而成的；
常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、偽類選擇器等。
1.後代選擇器：
後代選擇器又稱為包含選擇器，可以選擇父元素裡的子元素。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀式，內層標籤就成為外層標籤的後代
語法：
元素1 元素2 {樣式宣告}
上述語法表示選擇元素1裡的所有元素2（後代元素）。
<style> /* 想要把ol裡的小li選出來改為pink */ ol li { color: pink; } ol li a{ color: powderblue; } .nav li a { color: yellow; } </style> </head> <body> <ol> <li>我是ol的孩子</注意： 元素1和元素2中間一定要空格隔開； 元素1是父級，元素2是子級，最終選擇的是元素2； 元素2可以是兒子，也可以是孫子，只要是元素1的後代即可； 元素1和元素2可以使任意的基礎選擇器。li> <li>我是ol的孩子</li> <li><a href="#">我是ol的孫子</a></li> <li>我是ol的孩子</li> </ol> <ul class="nav"> <li>我是ul的孩子</li> <li>我是ul的孩子</li> <li><a href="#">不會變化的</a></li> <li><a href="#">不會變化的</a></li> <li><a href="#">不會變化的</a></li> <li><a href="#">不會變化的</a></li> <li>我是ul的孩子</li> </ul> </body>
2.子選擇器：
<style> /* 後代 */ .nav a{ color: yellowgreen; } /* 子選擇器 */ .nav>a{ color: violet; } </style> </head> <body> <div class="nav"> <a href="#">我是兒子</a> <p> <a href="#">我是孫子</a> </p> </div> </body>注意： 元素1和元素2中間用大於號隔開； 元素1是父級，元素2是子級，最終選擇的是元素2； 元素2必須是親兒子，其孫子、重孫子之類的都不歸他管。 3.並集選擇器: 並集選擇器是個選擇器通過英文逗號（,）連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。 語法： 元素1，元素2{樣式宣告} 上述語法表示選擇元素1和元素2。
<style> /* 要求1：請把熊大和熊二改為粉色 */ /* div, p { color: pink; } */ /* 要求2：請把熊大熊二改為粉色，還有小豬一家改為粉色 */ div, p, .pig li { color: pink; } /* 約定的語法規範，並集選擇器一般豎著寫 最後一個選擇器不需要加逗號*/ </style> </head> <body> <div>熊大</div> <p>熊二</p> <span>光頭強</span> <ul class="pig"> <li>小豬佩奇</li> <li>豬爸爸</li> <li>豬媽媽</li> </ul> </body>注意： 元素1和元素2中間用逗號隔開； 逗號可以理解為和的意思； 並集選擇器通常用於集體宣告。 並集選擇器可以選擇多組標籤，同時為他們定義相同的樣式，通常用於集體宣告。 4.偽類選擇器： 偽類選擇器用於像某些選擇器新增特殊的效果，比如給連結新增特殊效果，或者選擇第1個，第n個元素。 偽類選擇器書寫最大的特點是用冒號（:）表示，比如:hover、:first-child。 這裡主要寫連結偽類選擇器和focus偽類選擇器： 連結偽類選擇器 語法: a:link 選擇所有未被訪問的連結 a:visited 選擇所有已被訪問的連結 a:hoer 選擇滑鼠指標位於其上方的連結 a:active 選擇活動連結（滑鼠按下未彈起的連結） 實際開發中主要用到a{}和a:hover。
<style> /* 未訪問的連結 a:link 把沒有點選過的（訪問過的）連結選出來*/ a:link { color: #333; text-decoration: none; } /* 已訪問的連結 a:visited 把已經點選（訪問過的）連結選出來 */ a:visited { color: orange; } /* 選擇滑鼠經過的連結 a:hover */ a:hover { color: skyblue; } /* 選擇我們滑鼠正在按下還沒有彈起滑鼠的那個連結 a:active */ a:active { color: springgreen; } </style> </head> <body> <a href="#">小豬佩奇</a> <a href="#">豬爸爸</a> </body>連結偽類選擇器注意事項 1.為了確保生效，請按照LVHA的循順序宣告 :link- :visited- :hover- :active。 2.因為a連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。 focus偽類選擇器 :focus偽類選擇器用於選取獲得焦點的表單元素 焦點就是游標，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說。
<style> /* 把獲得游標的input表單元素選取出來 */ input:focus { background-color: pink; color: purple; } </style> </head> <body> <input type="text"> <input type="text"> <input type="text"> </body>