重點：
- 復合選擇器
- 后代選擇器
- 並集選擇器
- 標簽顯示模式
- CSS背景
- 背景位置
- CSS三大特性
- 優先級
1. CSS復合選擇器
目標
-
理解
- 理解css復合選擇器分別的應用場景
-
應用
- 使用后代選擇器給元素添加樣式
- 使用並集選擇器給元素添加樣式
- 使用偽類選擇器
為什么要學習css復合選擇器
CSS選擇器分為 基礎選擇器 和 復合選擇器 ，但是基礎選擇器不能滿足我們實際開發中，快速高效的選擇標簽。
- 目的是為了可以選擇更准確更精細的目標元素標簽。
- 復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
1.1 后代選擇器（重點）
-
概念：
后代選擇器又稱為包含選擇器
-
作用：
用來選擇元素或元素組的子孫后代
-
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，再寫兒子孫子。
父級 子級{屬性:屬性值;屬性:屬性值;}
- 語法：
.class h3{color:red;font-size:16px;}
- 當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
- 子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內 的標簽。
1.2 子元素選擇器
-
作用：
子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
-
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個
>進行連接 -
語法：
.class>h3{color:red;font-size:14px;}
一句話說出他們
這里的子 指的是 親兒子 不包含孫子 重孫子之類。
白話：
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含着h3。
1.3 交集選擇器
-
條件
交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
- 語法：
- 其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。
記憶技巧：
交集選擇器 是 並且的意思。 即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的 段落標簽。
用的相對來說比較少，不太建議使用。
1.4 並集選擇器（重點）
- 應用：
- 如果某些選擇器定義的相同樣式，就可以利用並集選擇器，可以讓代碼更簡潔。
- 並集選擇器（CSS選擇器分組）是各個選擇器通過
,連接而成的，通常用於集體聲明。 - 語法：
-
任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。
-
記憶技巧：
並集選擇器通常用於集體聲明 ，逗號隔開的，所有選擇器都會執行后面樣式，逗號可以理解為 和的意思。
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。
通常用於集體聲明。
他和他，在一起， 在一起 一起的意思
測試題
<style>
/* 1. 鏈接 登錄 的顏色為紅色 */
.site-r a {
color: red;
}
/*2. 主導航欄里面的所有的鏈接改為橙色 */
.nav ul li a {
color: orange;
}
/*3. 主導航欄和側導航欄里面文字都是14像素並且是微軟雅黑。*/
.nav,
.sitenav {
font: 14px "微軟雅黑";
}
</style>
<!-- 主導航欄 -->
<div class="nav">
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">公司產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
<!-- 側導航欄 -->
<div class="sitenav">
<div class="site-l">左側側導航欄</div>
<div class="site-r"><a href="#">登錄</a></div>
</div>
在不修改以上結構代碼的前提下，完成以下任務：
- 鏈接 登錄 的顏色為紅色
- 主導航欄里面的所有的鏈接改為橙色
- 主導航欄和側導航欄里面文字都是14像素並且是微軟雅黑。
1.5 鏈接偽類選擇器（重點）
偽類選擇器：
為了和我們剛才學的類選擇器相區別
類選擇器是一個點， 比如 .demo {}
而我們的偽類 用 2個點， 就是 冒號， 比如 :link{} 偽娘
作用：
用於向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
-
a:link /* 未訪問的鏈接 */
-
a:visited /* 已訪問的鏈接 */
-
a:hover /* 鼠標移動到鏈接上 */
-
a:active /* 選定的鏈接 */
注意
- 寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。否則可能引起錯誤。
- 記憶法
- love hate 愛上了討厭
- **lv **包包 非常 hao
- 因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
- 因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
- 實際工作開發中，我們很少寫全四個狀態，一般我們寫法如下：
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候，由原來的 灰色 變成了紅色 */
}
1.6 復合選擇器總結
| 選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 .nav a |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 並集選擇器 | 選擇某些相同樣式的選擇器 | 可以用於集體聲明 | 較多 | 符號是逗號 .nav, .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |