一、CSS復合選擇器
復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標簽）
二、CSS復合選擇器分類
常用的復合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器
11.復合選擇器.png
2.1 后代選擇器
后代選擇器又稱為包含選擇器，可以選擇父元素里面所有子元素。
語法：把父標簽寫在前面，子標簽寫在后面，中間用空格分隔。
后代選擇器.png
注意：
1.元素1和元素2之間用空格隔開。
2.元素1 和 元素2 可以是任意基礎選擇器
3.被選擇的是元素1的后代元素2，元素1本身不被影響。
<style>
/* !-- 需求：將ul里面的li變成粉色 */
ul li {
color: pink;
}
/* 需求：將第二個ul里的li變?yōu)樗{色 */
.nav li {
color: blue;
}
/* 需求：將div的兒子和孫子變成黃色 */
/* 被改變的只是父元素里的子元素，父元素本身不被影響 */
div p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>ul的第一個兒子</li>
<li>ul的第二個兒子</li>
<li>
<p>ul的第一個孫子</p>
<p>ul的第二個孫子</p>
</li>
</ul>
<ul class="nav">
<li>2ul的第一個兒子</li>
<li>2ul的第二個兒子</li>
<li>
<p>2ul的第一個孫子</p>
<p>2ul的第二個孫子</p>
</li>
</ul>
<div>
div的文字
<p>
div的兒子
<p>div的孫子</p>
</p>
</div>
后代選擇器1.png
2.2 子選擇器
只能選擇作為某元素的最近一級子元素，選親兒子元素.
語法：把父標簽寫在前面，子標簽寫在后面，中間用">"分隔。
11.子代選擇器.png
注意：
1.元素1 和 元素2 中間用 大于號 隔開
2.元素2 必須是親兒子，即最近的元素，其孫子、重孫之類都不歸他管
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子選擇器</title>
<!-- 只會改變離父選擇器最近的子元素 -->
<style>
/*1.需求：將所有豬變大*/
div a {
font-size: 30px;
}
/*2.需求：將豬頭變成紅色*/
/* 子代選擇器只會選擇離父元素最近的子元素 */
div>a {
color: red;
}
/*3.需求：用子代選擇器將豬尾巴變成綠色*/
div>ul>li>p>a {
color: green;
}
</style>
</head>
<body>
<!-- 關系分析：div中，p,a,ul是離他最近的子元素(親兒子)，li是它的孫子，li里面的a和p是它的重孫子 -->
<div>
<p>對比</p>
<a href="#">豬頭</a>
<ul>
<li><a href="#">豬腦</a></li>
<li>
<p>
<a href="#">豬尾巴</a>
</p>
</li>
</ul>
</div>
</body>
</html>
11.子代選擇器2.png
2.3 并集選擇器
并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式。
通常用于集體聲明。并集選擇器是各選擇器通過英文逗號","連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。
11.并集選擇器.png
注意：
1.元素1 和 元素2 中間用逗號隔開
2.一般豎著寫
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集選擇器</title>
<!-- 兩個標簽之間用英文逗號隔開，一般豎著寫 -->
<style>
/* 1.需求：將豬頭和豬肚子改為紅色 */
div,
a {
color: red;
}
/* 1.需求：將豬腦和豬尾巴改為綠色 */
p,
.green {
color: green;
}
</style>
</head>
<body>
<div>豬頭</div>
<p>豬腦</p>
<a href="#">豬肚子</a>
<ul>
<li>豬屁股</li>
<li class="green">豬尾巴</li>
</ul>
</body>
</html>
11.并集選擇器2.png
2.4 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果
2.4.1 鏈接偽類選擇器
? a:link 沒有點擊過的(訪問過的)鏈接
a:visited 點擊過的(訪問過的)鏈接
? a:hover 鼠標經(jīng)過的那個鏈接
? a:active 鼠標正在按下還沒有彈起鼠標的那個鏈接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏈接偽類</title>
<style>
/* :link和:visited只能給鏈接使用 */
/* :hover和:active可以為任何元素使用 */
/* 未點擊過的標簽 */
a:link {
color: #666;
text-decoration: none;
}
/* 已經(jīng)點擊過了的標簽 */
a:visited {
color: yellow;
}
/* 鼠標移到鏈接上的時候 */
a:hover {
color: red;
text-decoration: underline;
}
/* 鼠標按下去還未松開的時候 */
a:active {
color: green;
}
div {
width: 100px;
height: 100px;
}
/* 鼠標經(jīng)過div的時候 */
div:hover {
background-color: green;
}
/* 鼠標按下未松手的時候 */
div:active {
background-color: skyblue;
}
</style>
</head>
<body>
<a href="#">鏈接1</a>
<a >對比</a>
<div>:hover和:active可以為任何元素使用</div>
</body>
</html>
11.鏈接偽類選擇器.gif
注意：
1.為了確保生效，請按照 LVHA 的循順序聲明 :link－:visited－:hover－:active。
2.鏈接標簽都是需要單獨設定樣式,不能簡寫或者連寫。
2.4.2 focus偽類選擇器
:focus 偽類選擇器用于選取獲得焦點的表單元素。
<style>
/* 光標選定輸入框時候 */
input:focus {
color: pink;
background-color: gray;
}
textarea:focus {
color: red;
background-color: green;
}
</style>
</head>
<body>
輸入框1：<input type="text" name="" id=""><br>
文本域：
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
11.focus選擇器.gif
