CSS---復合選擇器、元素顯示模式和背景（三）

一、CSS的復合選擇器

1.1 什么是復合選擇器

在CSS中，可以根據選擇器的類型把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。
復合選擇器是由兩個或多個基礎選擇器連寫組成，它們共同作用于一個元素，沒有空格分隔。這樣可以更精確地指定你想要樣式化的HTML元素。
常用的復合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等。

1.2 后代選擇器（重要）

后代選擇器是CSS中一種用來選擇元素的子元素（直接或間接）的方法。它通過空格分隔的方式來選擇特定元素的所有后代。后代選擇器允許你定位到某個特定父元素下的所有特定類型的子元素，而不論這些子元素在層級中的深度如何。

語法：

上級元素 下級元素{樣式聲明
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代選擇器</title><style>.container  p  {color: red;}</style>
</head>
<body><div class="container"><p>我會變紅色。</p><div><p>我也會變紅色。</p></div>
</div></body>
</html>

1.3 子選擇器（重要）

子選擇器（也稱為直接子選擇器）是CSS中的一種選擇器，用于選擇所有直接子元素，也就是只選擇那些直接與父元素相鄰的元素，而不包括那些更深層次的后代元素。這種選擇器允許開發者更精確地指定應用樣式的HTML元素層級。

語法：

parent > child {樣式聲明
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子選擇器</title><style>.container > p  {color: red;}</style>
</head>
<body><div class="container"><p>只有我會變紅色。</p><div><p>我不變。</p></div>
</div></body>
</html>

1.4 并集選擇器（重要）

并集選擇器可以選擇多組標簽，同時為他們定義相同的樣式。通常用于集體聲明。

語法：

selector1, selector2, selector3 {樣式聲明
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集選擇器</title><style>h1, h2, h3 {color: red;}</style>
</head>
<body><h1>我是h1</h1><h2>我是h2</h2><h3>我是h3</h3><h4>我是h4</h4>
</body>
</html>

1.5 偽類選擇器

偽類選擇器是CSS中的一種特殊類型的選擇器，用于選擇HTML元素的特定狀態而不是基于元素的固有屬性。偽類能夠描述一個元素的特定狀態，比如當鼠標懸停在元素上時，或者當元素被選中或聚焦時。它們通常用來添加一些特殊效果或響應用戶的交互，而無需添加額外的類或ID。
偽類選擇器有很多，比如有鏈接偽類、結構偽類等。

1.5.1 鏈接偽類選擇器

a:link      /* 選擇所有未被訪問的鏈接 */
a:visited   /* 選擇所有已被訪問的鏈接 */
a:hover     /* 選擇鼠標指針位于其上的鏈接 */
a:active    /* 選擇活動鏈接（鼠標按下未彈起的鏈接） */

為了確保生效，請按照順序聲明，:link :visited :hover :active，否則不會生效

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* a:link 把沒有訪問過的鏈接選出來 */a:link{color: red;}</style>
</head>
<body><a href="#">百度</a>
</html>

1.5.2 focus 偽類選擇器

:focus偽類選擇器用于選取獲得焦點的表單元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 把獲得焦點的input表單元素選取出來*/input:focus{background-color: red;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>

1.6 復合選擇器總結

在這里插入圖片描述

二、CSS的元素顯示模式

2.1 什么是元素顯示模式

元素的顯示模式（display mode）指的是元素如何在頁面布局中被展示和排列的方式。
HTML元素一般分為塊元素和行內元素兩種類型

2.2 塊元素

常見的塊元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div`>標簽是最典型的塊元素。

注意：

文字類的元素內不能使用塊級元素
<p>標簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>
同理，<h1>~<h6>等都是文字類塊級標簽，里面也不能放其他塊級元素

2.3 行內元素

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。

在這里插入圖片描述

注意：

鏈接里面不能再放鏈接
特殊情況鏈接<a>里面可以放塊級元素，但是給<a>轉換一下塊級模式最安全

2.4 行內塊元素

在行內元素中有幾個特殊的標簽—— img /、<input />、<td>，它們同時具有塊元素和行內元素的特點。有些資料稱它們為行內塊元素。

行內塊元素的特點：

和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙，一行可以顯示多個（行內元素特點）。
默認寬度就是它本身內容的寬度（行內元素特點）。
高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。

2.5 元素顯示模式總結

在這里插入圖片描述

2.6 元素顯示模式轉換

特殊情況下，我們需要元素模式的轉換，簡單理解：一個模式的元素需要另一個模式的特性。
例如，一個元素默認可能是塊級元素，但在某些情況下，你可能希望它表現為行內元素或行內塊級元素。你可以通過CSS輕松實現這種轉換
轉換為塊級元素：display: block;
轉換為行內元素：display: inline;
轉換為行內塊：display: inline-block;

示例：
假設想要增加鏈接<a>的觸發范圍，<a>因為是行內元素，不可以設置寬度和高度，這時可以通過display: block;把<a>標簽轉換為塊級元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a {width: 150px;height: 50px;background-color: red;/* 把行內元素a，轉換為 塊級元素 */display: block;}</style>
</head>
<body><a href="#">百度</a>
</body>
</html>

2.7 一個小技巧單行文字垂直居中的代碼

CSS 沒有給我們提供文字垂直居中的代碼，這里我們可以使用一個小機器來實現。

解決方案：讓文字的行高等于盒子的高度，就可以讓文字在盒子內垂直居中

2.8 單行文字垂直居中的原理

在這里插入圖片描述

2.9 簡潔版小米側邊欄案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;}a:hover {background-color: #ff6700;}</style>
</head>
<body><a href="">手機 電話卡</a><a href="">電視 盒子</a><a href="">筆記本 平板</a><a href="">出行 穿戴</a><a href="">智能 路由器</a><a href="">健康 兒童</a><a href="">耳機 音響</a></body>
</html>

三、CSS的背景

通過CSS背景屬性，可以給頁面元素添加背景樣式
背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

3.1 背景顏色

background-color 屬性定義了元素的背景顏色
一般情況下元素背景顏色默認值時 transparent(透明)

語法：background-color:顏色值;

3.2 背景圖片

background-image屬性描述了元素的背景圖像。實際開發常見于log或者一些裝飾性的小圖片或者是超大的背景圖片，有點是非常便于控制位置。

語法：background-image: none | url(地址)

在這里插入圖片描述

3.3 背景平鋪

如果需要在HTML頁面上對背景圖像進行平鋪，可以使用background-repeat屬性。

語法：background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat：背景圖像在縱向和橫向上平鋪
no-repeat：背景圖像不平鋪
repeat-x ：背景圖像在橫向上平鋪
repeat-y：背景圖像在縱向平鋪

3.4 背景圖片位置

在CSS中，背景圖片的位置由 background-position 屬性控制，這個屬性設置背景圖像的起始位置。通過精確控制背景圖像在元素內的位置，可以實現更細致的設計效果。

background-position 屬性的使用:

background-position 的值可以使用關鍵詞、百分比或具體的長度單位（如像素或em）。關鍵詞包括 top、bottom、left、right、center 等，用于描述圖像相對于容器的位置。

常用的值及含義：

關鍵詞：例如 top left、bottom right、center center 等。第一個詞表示垂直位置，第二個詞表示水平位置。
百分比：background-position: 50% 75%。第一個百分比控制水平位置，第二個百分比控制垂直位置，0% 0% 是容器的左上角，100% 100% 是右下角。
長度單位：如 background-position: 10px 20px。第一個值是水平位置，第二個值是垂直位置，正值表示從左上角向右和向下的偏移。