一功偿、CSS復(fù)合選擇器
復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對基本選擇器進(jìn)行組合形成的漂佩。
復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器脖含，通過不同的方式組合而成的罪塔，可以更準(zhǔn)確投蝉、更高效的選擇目標(biāo)元素（標(biāo)簽）
二、CSS復(fù)合選擇器分類
常用的復(fù)合選擇器包括：后代選擇器征堪、子選擇器瘩缆、并集選擇器、偽類選擇器
2.1 后代選擇器
后代選擇器又稱為包含選擇器佃蚜，可以選擇父元素里面所有子元素庸娱。
語法：把父標(biāo)簽寫在前面，子標(biāo)簽寫在后面谐算，中間用空格分隔熟尉。
注意：
1.元素1和元素2之間用空格隔開。
2.元素1 和 元素2 可以是任意基礎(chǔ)選擇器
3.被選擇的是元素1的后代元素2洲脂，元素1本身不被影響斤儿。
<style>
/* !-- 需求：將ul里面的li變成粉色 */
ul li {
color: pink;
}
/* 需求：將第二個ul里的li變?yōu)樗{(lán)色 */
.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>
2.2 子選擇器
只能選擇作為某元素的最近一級子元素恐锦，選親兒子元素.
語法：把父標(biāo)簽寫在前面往果，子標(biāo)簽寫在后面，中間用">"分隔一铅。
注意：
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>
<!-- 關(guān)系分析：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>
2.3 并集選擇器
并集選擇器可以選擇多組標(biāo)簽, 同時為他們定義相同的樣式孽椰。
通常用于集體聲明。并集選擇器是各選擇器通過英文逗號","連接而成暴凑，任何形式的選擇器都可以作為并集選擇器的一部分峦甩。
注意：
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>
<!-- 兩個標(biāo)簽之間用英文逗號隔開，一般豎著寫 -->
<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>
2.4 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果
2.4.1 鏈接偽類選擇器
? a:link 沒有點(diǎn)擊過的(訪問過的)鏈接
a:visited 點(diǎn)擊過的(訪問過的)鏈接
? a:hover 鼠標(biāo)經(jīng)過的那個鏈接
? a:active 鼠標(biāo)正在按下還沒有彈起鼠標(biāo)的那個鏈接
<!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可以為任何元素使用 */
/* 未點(diǎn)擊過的標(biāo)簽 */
a:link {
color: #666;
text-decoration: none;
}
/* 已經(jīng)點(diǎn)擊過了的標(biāo)簽 */
a:visited {
color: yellow;
}
/* 鼠標(biāo)移到鏈接上的時候 */
a:hover {
color: red;
text-decoration: underline;
}
/* 鼠標(biāo)按下去還未松開的時候 */
a:active {
color: green;
}
div {
width: 100px;
height: 100px;
}
/* 鼠標(biāo)經(jīng)過div的時候 */
div:hover {
background-color: green;
}
/* 鼠標(biāo)按下未松手的時候 */
div:active {
background-color: skyblue;
}
</style>
</head>
<body>
<a href="#">鏈接1</a>
<a >對比</a>
<div>:hover和:active可以為任何元素使用</div>
</body>
</html>
注意：
1.為了確保生效，請按照 LVHA 的循順序聲明 :link－:visited－:hover－:active凯傲。
2.鏈接標(biāo)簽都是需要單獨(dú)設(shè)定樣式,不能簡寫或者連寫犬辰。
2.4.2 focus偽類選擇器
:focus 偽類選擇器用于選取獲得焦點(diǎn)的表單元素。
<style>
/* 光標(biāo)選定輸入框時候 */
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>
