?HTML骨架
<!DOCTYPE html>
<!-- 中文網站 -->
<html lang="zh-CN">
<head><!--charset="UTF-8" 規定網頁的字符編碼 --><meta charset="UTF-8"><!-- ie(兼容性差) / edge --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 寬度 = 設備寬度 : 移動端網頁的時候要用 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>?overflowSEO三大標簽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- meta:desc --><meta name="description" content="京東JD.COM-專業的綜合網上購物商城，為您提供正品低價的購物選擇、優質便捷的服務體驗。商品來自全球數十萬品牌商家，囊括家電、手機、電腦、服裝、居家、母嬰、美妝、個護、食品、生鮮等豐富品類，滿足各種購物需求。"><!-- meta:kw --><meta name="keywords" content="網上購物,網上商城,家電,手機,電腦,服裝,居家,母嬰,美妝,個護,食品,生鮮,京東"><title>京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！</title><!-- link:favicon : 瀏覽器標題欄圖標 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body></body>
</html>項目結構搭建
文件和目錄準備
1.新建項目文件夾xtx-pc-client，在VScode中打開
- ?在實際開發中，項目文件夾不建議使用中文
- 所有項目相關文件都保存在xtx-pc-client目錄中
?2.復制favicon.ico圖標到xtx-pc-client文件夾里
- 一般習慣將ico圖標放在項目根目錄
3.復制images和uploads子目錄到xtx-pc-client文件夾目錄中
- mages：存放網站固定使用的圖片素材，如：logo、樣式修飾圖片…等
- uploads：存放網站非固定使用的圖片素材，如：商品圖片、宣傳圖片…等
4.新建index.html在根目錄
- index.html整個項目入口首頁文件
5.新建css文件夾保存網站的樣式，并新建以下CSS文件：
- base.css：基礎公共樣式
- common.css：該網站中多個網頁相同模塊的重復樣式，如：頭部、底部
- index.css：首頁樣式
基礎公共樣式(base.css)
- 場景：一般項目開始前，首先會去除掉瀏覽器默認樣式，設置為當前項目需要的初始化樣式
- 作用：防止不同瀏覽器中標簽默認樣式不同的影響，統一不同瀏覽器的默認顯示效果，方便后續項目開發
- 已經準備好base.css代碼，同學們需要認識，項目中可以直接引入使用
index頁面骨架(index.html)
index.html整個項目入口首頁文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- meta:desc --><meta name="description" content="小兔鮮兒官網，致力于打造全球最大的食品、生鮮電商購物平臺"><!-- meta:kw --><meta name="keywords" content="小兔鮮兒,食品,生鮮,服裝,家電,電商,購物"><title>小兔鮮兒-新鮮、惠民、快捷！</title><!-- link:favicon --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 按順序引入: 外鏈式樣式表后寫的生效 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 快捷導航 --><div class="shortcut"><div class="wrapper"><ul><li><a href="#">請先登錄</a></li><li><a href="#">免費注冊</a></li><li><a href="#">我的訂單</a></li><li><a href="#">會員中心</a></li><li><a href="#">幫助中心</a></li><li><a href="#">在線客服</a></li><li><a href="#"><span></span>手機版</a></li></ul></div></div><!-- 頭部 --><div class="header wrapper"><div class="logo"><h1><a href="#">小兔鮮兒</a></h1></div><div class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">生鮮</a></li><li><a href="#">美食</a></li><li><a href="#">餐廚</a></li><li><a href="#">電器</a></li><li><a href="#">居家</a></li><li><a href="#">洗護</a></li><li><a href="#">孕嬰</a></li><li><a href="#">服裝</a></li></ul></div><div class="search"><input type="text" placeholder="搜一搜"><!-- 定位 放大鏡 --><span></span></div><div class="car"><span>2</span></div></div><!-- banner --><div class="banner"><div class="wrapper"><!-- 有多少個圖,就有都少個li --><ul><li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 側導航 --><div class="aside"><ul><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li><li><a href="#">生鮮<span>水果 蔬菜</span></a></li></ul></div><!-- 箭頭 --><!-- prev: 上一個 --><a href="#" class="prev"></a><!-- next : 下一個 --><a href="#" class="next"></a><!-- 圓點: 當前狀態: current / active --><!-- js 找到用戶點擊的li 添加類名 li變成白色的 --><ol><li></li><li></li><li class="current"></li><li></li><li></li></ol></div></div><!-- 新鮮好物 --><div class="goods wrapper"><!-- hd header 頭部 --><div class="hd"><h2>新鮮好物<span>新鮮出爐 品質靠譜</span></h2><a href="#">查看全部</a></div><!-- body 身體, 內容 --><div class="bd clearfix"><ul><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米無線吸塵器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米無線吸塵器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米無線吸塵器F8</h3><div>￥<span>899</span></div></a></li><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米無線吸塵器F8</h3><div>￥<span>899</span></div></a></li></ul></div></div><!-- 生鮮 --><div class="shengxian wrapper"><div class="hd"><h2>生鮮</h2><a href="#" class="more">查看全部</a><ul><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li></ul></div><div class="bd clearfix"><div class="left"><a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a></div><div class="right"></div></div></div><!-- 版權區域 --><div class="footer"><div class="wrapper"><div class="top"><ul><li><!-- 通過偽元素添加標簽實現精靈圖 --><span>價格親民</span></li><li><span>物流快捷</span></li><li><span>品質新鮮</span></li></ul></div><div class="bottom"><p><a href="#">關于我們</a> |<a href="#">幫助中心</a> |<a href="#">售后服務</a> |<a href="#">配送與驗收</a> |<a href="#">商務合作</a> |<a href="#">搜索推薦</a> |<a href="#">友情鏈接</a></p><p>CopyRight @ 小兔鮮兒</p></div></div></div>
</body></html>?什么是CSS?
?
CSS：層疊樣式表（Cascading style sheets）
CSS給頁面中的HTML標簽設置樣式? 。比如文本的顏色、字體大小、頁面布局、背景圖片等，從而使網頁不僅具有良好的結構（通過 HTML 實現），還能擁有美觀的視覺效果。
css寫在style標簽中，style標簽一般寫在head標簽里面，title標簽下面
?CSS 書寫順序:?
不同的CSS書寫順序會影響瀏覽器的渲染性能，推薦前端工程師使用專業的書寫順序習慣
CSS 書寫順序: 1. 布局屬性(定位 / 浮動 / display)? ; 2. 盒子模型; 3. 文字屬性?
CSS的書寫順序推薦
順序 類別 屬性 1 布局屬性 display?、position、float、clear、visibility、overflow 2 盒子模型+背景 width、height、margin、padding、border、background 3 文本內容屬性 color、font、text-decoration、
text-align、ine-height4 點綴屬性 cursor、
border-radius、
text-shadow
box-shadow注意點：
- 開發中推薦多用類+后代，但不是層級越多越好，一個選擇器中的類選擇器的個數推薦不要超過3個
CSS 的核心功能：
- 樣式定義：允許開發者為網頁元素指定具體的樣式，如顏色、字體、邊距、填充、位置等。
- 布局控制：通過 CSS 可以精確地控制網頁上各個元素的位置和排列方式，實現復雜的布局設計。
- 響應式設計：使用媒體查詢（Media Queries）等功能，可以創建適應不同設備尺寸（如桌面、平板電腦、手機）的響應式網頁設計。
- 可維護性：通過將樣式與內容分離，使得代碼更加清晰易讀，便于維護和更新。
?CSS 如何工作:
- 選擇器（Selector）：用來選擇要應用樣式的 HTML 元素。例如，
p { color: blue; }?表示所有?<p>?標簽內的文本顏色都將是藍色。 - 屬性（Property）：指定你想要改變的特定樣式。例如，在?
color: blue;?中，color?就是一個屬性。 - 值（Value）：屬性對應的設置或數據。在上面的例子中，
blue?是?color?屬性的值。
CSS 應用方法:
CSS 可以通過以下三種方式應用到 HTML 文檔中：
| 引入方式 | 書寫位置 | 作用范圍 | 使用場景 |
| 內聯樣式(行內式) | css寫在標簽的style屬性中 | 當前標簽 | 配合js使用 |
| 內部樣式表(內嵌式) | css寫在style標簽中 | 當前html頁面 | 小案例demo |
| 外部樣式表(外聯式) | css寫在單獨的.css文件中，需要配合link標簽引入 | 多個頁面 | 項目中 |
內聯樣式(行內式)：
CSS 寫在 標簽的style屬性中.
? <p style="color: blue;">這是一個段落。</p>
?<div style="color: green; font-size: 30px;">這是div標簽</div>
優點：針對單個元素快速應用樣式。
缺點：不利于維護，不推薦大量使用。
案例:
<body><!-- p標簽 沒有添加style屬性 --><p>這是p標簽</p><!-- 內聯樣式(行內式): CSS 寫在 p標簽的style屬性中. --><p style="color: blue;">這是一個段落。</p><!-- div標簽 沒有添加style屬性 --><div>這個div是什么顏色</div><!-- 內聯樣式(行內式): CSS 寫在div標簽的style屬性中. --><div style="color: green; font-size: 30px;">這是div標簽</div>
</body>
內部樣式表(內嵌式)：
css寫在style標簽中。
style標簽一般寫在head標簽里面，title標簽的下面
提示：style標簽雖然可以寫在頁面任意位置，但是通常約定寫在 head 標簽中
適用于單個頁面的樣式定義。
- 維護性：雖然內部樣式表對于小型項目或快速原型設計非常有用，但對于較大的項目，建議使用外部樣式表（通過?
<link rel="stylesheet">?引入），以便更好地組織和復用樣式。- 優先級：內部樣式表的優先級高于外部樣式表，但低于內聯樣式（即直接在 HTML 元素上使用的?
style?屬性）。這意味著如果在同一元素上有多種樣式來源，內部樣式表中的規則可能會覆蓋外部樣式表中的規則，除非有更具體的規則或使用了?!important?聲明。
案例:
這是一個完整的 HTML 頁面示例，展示了如何在
<head>部分使用<style>標簽來定義一個簡單的樣式規則，該規則將所有<p>元素的文字顏色設置為藍色。當你將上述代碼保存為一個
.html文件并在瀏覽器中打開時，你會看到頁面上的所有段落文本都是藍色的。這是因為你在<head>部分通過<style>標簽定義了一個 CSS 規則，這個規則適用于整個 HTML 文檔中的所有<p>元素。?
<head>部分：
- 包含了?
<meta>?標簽和?<title>?標簽，這些標簽提供了關于文檔的基本信息。<style>?標簽被放置在<head>標簽里，其中包含了 CSS 規則。在這個例子中，規則?p { color: blue;.... }?表示所有的?<p>?標簽內的文本顏色都將是藍色。
<body>部分：
- 包含了實際的頁面內容，比如?
<h1>?和?<p>?標簽。- 每個?
<p>?標簽內的文本都會根據?<style>?標簽中的 CSS 規則呈現為藍色。
<!DOCTYPE html>
<html lang="en">
<head><!-- 設置文檔字符編碼 --><meta charset="UTF-8"><!-- 設置視口，確保頁面適合移動設備 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 頁面標題 --><title>內部樣式表(內嵌式)</title><!-- style 標簽中定義css樣式 --><style>/* 這里寫的都是css */p {/* 將所有段落文字顏色設置為藍色 */color: blue; /* 字變大 px:像素 */font-size: 15px;/* 背景顏色 */background-color: green;/* width height; */width: 300px;height: 50px;}</style></head>
<body><!-- 頁面內容 --><!--默認樣式 在style標簽中沒有對應的h1標簽選擇器 --><h1>歡迎來到我的網頁</h1><p>這是一個段落，其文字顏色被設置為藍色。</p><p>這是另一個段落，同樣顯示為藍色。</p><!--默認樣式 在style標簽中沒有對應的div標簽選擇器 --><div >這是div標簽</div> </body>
</html>
外部樣式表(外聯式)：
css寫在單獨的.css文件中，通過
<link>標簽鏈接引入一個獨立的.css文件。
最常用的方法，便于維護和復用樣式。
案例：
假設我們有一個簡單的 HTML 頁面，并希望通過 CSS 來美化它：
當你在瀏覽器中打開
index.html文件時：
- 頁面背景是墨綠色（由 CSS 控制）
- 標題?
<h1>?是藍色- 所有p段落文字大小為 16px，行高為 1.5
- 帶有?
class="highlight"?的段落會顯示黃色背景和粗體黑色文字
第一步：創建?index.html?文件
這是你的網頁主文件，在
<head>中通過<link>標簽引用外部 CSS 文件。注意事項:
- ? 路徑要正確：
?? 確保?
href="styles.css"?中的路徑正確指向 CSS 文件的位置。? 如果 CSS 文件在子文件夾里（如?
/css/styles.css），請相應修改為?href="css/styles.css"
緩存問題：
?????? 瀏覽器可能會緩存舊的 CSS 文件。如果你修改了樣式但沒看到效果，嘗試刷新頁面或清除緩存。
- 文件編碼：
???? 推薦將 HTML 和 CSS 文件都保存為 UTF-8 編碼格式，避免中文亂碼。
<link rel="stylesheet" type="text/css" href="styles.css">分析
元素 說明 <link rel="stylesheet" ...> 在 HTML 中引入外部 styles.css文件 href="styles.css" 指定 styles.css文件的路徑 type="text/css" 指明文件類型（HTML5 中可省略）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部樣式表示例</title><!-- 引入外部 CSS 文件 --><link rel="stylesheet" type="text/css" href="styles.css"></head>
<body><h1>歡迎來到我的網站</h1><p>這是一個段落，它的樣式來自外部的 styles.css 文件。</p><p class="highlight">這個段落有特殊的高亮樣式。</p>
</body>
</html>第二步：創建?styles.css?文件
將以下內容保存為 styles.css，并放在與 index.html 相同的目錄下。
/* styles.css *//* 設置整個頁面背景和字體 */body {background-color: hsl(175, 75%, 69%);font-family: Arial, sans-serif;color: #333;padding: 20px;
}/* 修改 h1標簽 的顏色 */
h1 {color: #007BFF;
}/* p評標段落基本樣式 */
p {font-size: 16px;line-height: 1.5;color: red;
}/* 自定義類樣式
給帶有 highlight 類的段落添加樣式
*/
.highlight {background-color: yellow;padding: 2px 5px;font-weight: bold;color: black;
}
<style>?標簽
<style>標簽是 HTML 中用于定義內嵌樣式表的元素。它允許你在 HTML 文檔內部直接編寫 CSS（層疊樣式表）代碼，從而控制頁面中元素的外觀和布局。使用<style>標簽可以在不離開 HTML 文件的情況下為文檔添加樣式，盡管在實際開發中更推薦使用外部CSS樣式表以提高代碼的可維護性和復用性。
<style>標簽提供了一種簡單的方法來將 CSS 直接嵌入到 HTML 文檔中，適用于小規模項目或是需要快速實現樣式的場合。然而，為了保持代碼的整潔、可維護性和性能優化，建議在大多數情況下使用外部樣式表。這樣不僅能夠更好地管理樣式文件，還能利用瀏覽器緩存機制提升加載效率。
主要用途：
- 內嵌樣式：通過?
<style>?標簽，你可以在 HTML 文檔的?<head>?部分或者任何其他部分（雖然通常放在?<head>?內）直接編寫 CSS 代碼，以應用特定于該頁面的樣式。 - 作用范圍：內嵌樣式僅對當前 HTML 文檔有效，這意味著它們不會影響其他頁面的樣式。
使用場景:
盡管外部CSS樣式表是最佳實踐，但在某些情況下使用
<style>標簽是有意義的：
- 快速原型設計：當你快速測試一個想法或進行原型設計時，在 HTML 文件中直接添加樣式可以加快開發速度。
- 局部樣式覆蓋：如果只需要在一個頁面上應用少量自定義樣式，而不希望創建一個新的外部 CSS 文件，可以直接在頁面內使用?
<style>?標簽。- 郵件模板：由于許多電子郵件客戶端對鏈接到外部資源的支持有限，因此在 HTML 郵件模板中常會看到內聯樣式或內部樣式表。
注意事項:
- 優先級問題：內嵌樣式具有較高的優先級，可能會覆蓋外部樣式表中的相同規則。這可能導致樣式沖突，因此在組織項目結構時需謹慎處理。
- 性能考量：相比于外部樣式表，內嵌樣式無法被緩存，每次加載頁面時都需要重新下載，對于大型網站來說可能會影響性能。
? 案例:
??
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>style標簽的使用</title><!-- 在這里編寫 CSS 代碼 --><style>/* 整個body的樣式 */body{background-color: #f0abab;font-family: Arial, sans-serif;}/* 好標簽的樣式 */h1 {color: navy;}/* intro類的樣式 */.intro {font-size: 18px;color: green;}</style></head>
<body><h1>歡迎來到我的網站</h1><p class="intro">這是一個使用 CSS 樣式的段落。</p>
</body>
</html>
?style標簽的屬性:
type屬性：
指定樣式表的語言類型。雖然現代瀏覽器默認識別
text/css，但為了兼容性，通常會顯式聲明：<style type="text/css">/* CSS 代碼 */ </style>
media屬性：
指定媒體查詢條件，用來定義哪些設備或視窗條件下應用這些樣式。例如，你可以為打印版本和屏幕版本分別定義不同的樣式：?
<style media="screen">/* 屏幕顯示的樣式 */ </style> <style media="print">/* 打印時使用的樣式 */ </style>
?CSS的選擇器
選擇器的作用：
選擇頁面中對應的標簽（找她），方便后續設置樣式（改她）
實際開發的情況:
類選擇器用的最多
id一般配合js使用，除非特殊情況，否則不要使用id設置樣式
實際開發中會遇到冗余代碼的抽取 （可以將一些公共的代碼抽取到一個公共的類中去）
| 選擇器類型? | ? 寫法示例 | 含義說明? | |
| 單選擇器 | 元素選擇器? | 在 CSS 中，div{}, p{},??是? 元素選擇器， (注意:這里的 div {}是“元素選擇器”，而不是“div元素本身”) | div{}, p{}元素選擇器 匹配的是html頁面中所有 標簽名為 :<div></div> <p></p> 等的元素 |
| 類選擇器 | ?.father{}? ? | ?html頁面中選中所有 具有 class="father" 的 元素 | |
| ID 選擇器? | ?#main | ? ?html頁面中選中唯一一個 具有 id="main" 的 元素 | |
| 屬性選擇器 | [type="text"]? | ?html頁面中選中所有 具有 type="text" 屬性的元素 | |
| 復合選擇器 | 后代選擇器 | div p | ?html頁面中選中所有 div 元素下的 p 元素 |
| 直接子元素選擇器 | div > p | html頁面中選中所有 div元素 的直接子元素 p | |
| 交集選擇器 | div.my-class (divp這種是錯誤的) | html頁面中選中必須是 div元素 并且有 類class="my-class" 的元素 | |
| 并集選擇器 | div,p | html頁面中選中所有 div元素 和 p元素 | |
偽 選 擇 器 | 偽類選擇器? | ? a:hover, li:first-child? | 選中html頁面中處于某種狀態的 元素（如鼠標懸停、第一個子元素等） a 元素在 hover 鼠標懸停狀態下 |
| 偽元素選擇器 | ::before | 在元素內容前插入內容 |
1.元素選擇器：
標簽選擇器 就是 以標簽名命名的選擇器.
結構：標簽名 { css屬性名：屬性值； }
作用：通過標簽名，找到頁面中所有這類標簽，設置樣式(選中所有的這個標簽都生效css)
注意點：
1. 標簽選擇器選擇的是一類標簽，而不是單獨某一個
2.標簽選擇器無論嵌套關系有多深，都能找到對應的標簽
??
?元素選擇器 vs元素區別??
| 項目? | ? 元素選擇器 (“身份證號碼”) | 元素 (“人”) |
| 定義 | CSS 中用于匹配特定標簽名的規則? 例如: div{}、p {}這樣的選擇器，它匹配的是 HTML 中對應標簽名div? p元素。 | HTML 中構成網頁結構的基本標簽元素 例如:<div></div> <p></p> |
| 寫在哪里 | 寫在CSS 文件 或 <style> 標簽中 | 寫在HTML 文件? |
| ? 作用? | 告訴瀏覽器“要給哪些元素設置樣式”? 例如:要給div p 元素設置樣式 | 網頁的實際結構內容，可以被選擇器選中并應用樣式 |
| 是否可見 | 不可見，是樣式規則的一部分 | ? 可見（配合樣式后顯示在頁面上） |
| 示例代碼 | ?CSS文件里:? ? div { color: red; } p { font-size: 20px; } | HTML 文件里: <div>這是一個 div 元素</div> <p>這是一個段落元素</p> |
| 舉例說明 | ? ? div{},? p{}都是元素選擇器 (注意：這里的 div p 是“元素選擇器”，而不是“元素本身”。) | :<div></div>標簽元素 <p></p>標簽元素 可以被div{} p{}元素選擇器選中。 |
| 關系 | ? 選擇器用來選中 HTML 元素并為其設置樣式? | ? HTML 元素是被選擇器選中的對象 |
| 類比 | 選擇器就像“身份證號碼”，用來識別人（元素） | 元素就像“具體的人”，有真實的存在,具有各種屬性（比如姓名、年齡等） |
? 案例:
?在css文件里(元素選擇器):
/* CSS 文件中的div p元素選擇器 */
div {color: red;
}
p {color: blue;
}或者在HTML文檔內部(元素選擇器):：
<style>/* <style> 標簽內的div p元素選擇器 */div {color: red;}p {color: blue;}
</style>?? 在HTML文件中(元素):
<!-- HTML 文件中的元素 div p -->
<p>這是一個段落。</p>
<div>這是一個div容器。</div>???
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 選擇器 {} *//* 標簽選擇器 就是 以標簽名命名的選擇器 */p {color: red;}/* 標簽選擇器 選中所有的這個標簽都生效css */</style>
</head>
<body><!-- 有對應的p標簽選擇器 css樣式生效 --><p>這是一個段落，其文字顏色被設置為藍色。</p><p>這是另一個段落，同樣顯示為藍色。</p><!--默認樣式 在style標簽中沒有對應的div標簽選擇器 --><div >這是div標簽</div> </body>
</html>
2.類選擇器 ：
類選擇器定義:以一個點號 . 開頭，后接類名,用于選中所有具有該類名的 HTML 元素，并為其應用樣式。
類選擇器結構：.類名 { css屬性名：屬性值； }
類選擇器作用：通過類名，找到頁面中所有帶有這個類名的標簽，設置樣式
注意點：
1. 所有標簽上都有class屬性，class屬性的屬性值稱為類名（類似于名字）class="XXX"
2.類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或者中劃線開頭
3.一個標簽的class屬性可以同時有多個類名，類名之間以空格隔開
4.類名可以重復，一個類選擇器可以同時選中多個標簽
案例1:
? 在css文件里
//.father 類選擇器 用來選中 HTML 中 class='father' 的元素(div p)
.father {color: red;
}// div 元素選擇器 用來選中 HTML 中所有div元素
div{color: green;
}// p 元素選擇器 用來選中 HTML 中所有p元素
p{color: blue;
}在html文件里
- 這兩個標簽div p都會被?
.father?類選擇器選中 → 文字變成紅色。- 雖然它們一個是?
<div>，一個是?<p>，但都因為有?class="father"?而被同一個樣式規則影響。
// div p 在這里才是元素
//這兩個標簽元素div p 因為有 class="father"
//都會被 .father 類選擇器選中，作用于這兩個標簽元素里的文字變成紅色。
<div class="father">我是父親</div>
<p class="father">我也是父親？</p>案例2:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}.size {font-size: 66px;}</style>
</head>
<body><!-- 類: 定義 和 使用才能生效 --><!-- 默認樣式 沒有設置class屬性 就沒有對應的類選擇器 生成css樣式 --><p>111</p> <!-- 一個標簽的class屬性可以定義多個類名 , 需要空格隔開即可 --><p class="red size">222</p><div class="red">這個標簽文字也要變紅</div></body>
</html>
?3.id選擇器 :
結構：#id屬性值 { css屬性名：屬性值； }
?作用：通過id屬性值，找到頁面中帶有這個id屬性值的標簽，設置樣式
注意點：
1. 所有標簽上都有id屬性
2.id屬性值類似于身份證號碼，在一個頁面中是唯一的，不可重復的！
3.一個標簽上只能有一個id屬性值
4.一個id選擇器只能選中一個標簽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定義id選擇器:具有唯一性 */#blue {color: skyblue;}</style>
</head>
<body><div id="blue">這個div文字是藍色的</div><p id="blue">111</p>
</body>
</html>
4.通配符選擇器：
結構：* { css屬性名：屬性值； }
作用：找到頁面中所有的標簽，設置樣式
注意點：
1. 開發中使用極少，只會在極特殊情況下才會用到
2.在基礎班小頁面中可能會用于去除標簽默認的margin和padding（后續講解）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style>
</head>
<body><div>div</div><p>pppp</p><h1>h1</h1><span>span</span><p>pppp</p><h2>h2</h2>
</body>
</html>
?class類名與id屬性值的區別:
- class類名相當于姓名，可以重復，一個標簽可以同時有多個class類名
id屬性值相當于身份證號碼，不可重復，一個標簽只能有一個id屬性值
?類選擇器與id選擇器的區別：
- 類選擇器以 . 開頭
- id選擇器以 # 開頭
?5.復合選擇器:
? 5.1 后代選擇器?
根據 HTML 標簽的嵌套關系，選擇父元素 后代中 滿足條件的元素
選中“選擇器1 所匹配元素內部的所有符合選擇器2 條件的后代元素”。
?后代選擇器語法：
選擇器1 選擇器2 { css }選擇器1?是祖先元素；
選擇器2?是其任意層級的后代元素（不一定是直接子元素）。
先通過選擇器1找到一堆標簽，在這一推標簽的后代（兒子、孫子、重孫子…）中找到滿足選擇器2的標簽，設置樣式。
注意點：
1. 后代包括：兒子、孫子、重孫子……
2. 后代選擇器中，選擇器與選擇器之前通過 空格 隔開
?后代選擇器:添加選擇器1?選擇器2的條件
選擇器1:??
任何合法的 HTML 標簽都可以作為選擇器1，不管它是否能包含子元素。
注意：
1.如果你使用標簽元素作為選擇器1,? ?那么只有可嵌套內容的標簽才能作為選擇器1
(如 <div>、<section>、<article>、<ul>、<li> 等)1.偽元素如
::before和::after不能作為選擇器1，因為它們不是 DOM 樹中的實際節點。2.?
img a { ... } /* 不推薦，因為 img 不能包含 a */
- 雖然你可以寫
img a {}，雖然語法上是合法的 CSS, 但是?<img>是一個 空元素，它不能包含其他元素，所以永遠不會有任何后代元素滿足這個條件,這樣寫沒有意義的。3.常見不能包含子元素的標簽（空元素）不能有內容，自然也不能有后代元素。
這些作為選擇器1都是無意義的：
標簽 說明 <img>圖片 <input>表單輸入框 <br>換行符 <hr>分隔線 <meta>頁面元信息 <link>外部資源鏈接 <source>音視頻源
滿足
| 示例 | 含義 |
|---|---|---|
| 元素選擇器 | div | 所有?<div>?元素 |
| 類選擇器 | .box | 所有 class 包含?box?的元素 |
| ID 選擇器 | #main | 唯一的 id 為?main?的元素 |
| 屬性選擇器 | [type="text"] | 所有 type 屬性等于 text 的元素 |
| 偽類選擇器 | a:hover | 鼠標懸停時的鏈接 |
| 偽元素選擇器 | p::first-line | 段落的第一行（注意：偽元素不能作為選擇器1） |
| 組合選擇器 | nav, .menu | 多個選擇器用逗號分隔（只能用于規則開頭） |
選擇器2 :
任何合法的 HTML 標簽都可以作為選擇器2，只要它是選擇器1所匹配元素的后代。
| 類型 | 示例 | 含義 |
|---|---|---|
| 元素選擇器 | p | 所有段落元素 |
| 類選擇器 | .highlight | class 包含 highlight 的元素 |
| ID 選擇器 | #title | id 為 title 的元素 |
| 屬性選擇器 | [href] | 所有具有 href 屬性的 a 標簽 |
| 偽類選擇器 | li:last-child | 列表項中的最后一個子元素 |
| 偽元素選擇器 | div::after | 在 div 后插入內容（僅限偽元素） |
| 子代選擇器 | ul > li | ul 下的直接子元素 li |
| 相鄰兄弟選擇器 | h1 + p | h1 后的第一個 p 元素 |
| 通用兄弟選擇器 | h1 ~ p | h1 后面所有同級 p 元素 |
?? 注意：如果你在后代選擇器中使用了 >、+ 或 ~ 等關系符號，則不再是“純后代選擇器”。
?選擇器1 + 選擇器2組合示例
| 選擇器1 | 選擇器2 | 合法組合示例 | 效果說明 |
|---|---|---|---|
| 元素 | 元素 | div p | 所有 div 內部的 p 元素 |
| 元素 | 類 | div .content | 所有 div 內 class 為 content 的元素 |
| 元素 | 偽類 | div p:hover{} | |
| 類 | 元素 | .menu ul | class 為 menu 的元素內部的所有 ul? ?.menu li {} |
| 類 | 類 | .box .item | class 為 box 的元素內部 class 為 item 的元素 |
| ID | 元素 | #header nav | id 為 header 的元素內的 nav |
| ID | 類 | #sidebar .link | id 為 sidebar 的元素內 class 為 link 的元素 #main .content {} |
| 屬性選擇器 | 偽類 | [type="text"]:focus | 所有 type 為 text 并獲得焦點的輸入框 input[type="text"]:focus {} |
| 偽類 | 元素 | li:hover span | 當鼠標懸停在 li 上時，里面的 span 被選中 |
| 偽類 | 偽類 | a:hover .icon | 不合法 ?（偽類不能嵌套后代選擇器） |
非法組合示例與原因
| 錯誤寫法 | 原因 |
|---|---|
::before span | 偽元素::before不能作為選擇器1 |
p::first-line em | ::first-line?是偽元素，不能再包含后代 |
a:hover .icon | 偽類（ |
input[type="text"]:required | 這是屬性選擇器和偽類的疊加，并非后代選擇器，但也可以合法存在（取決于語義） |
| 選擇器類型 | 可否作為選擇器1 | 可否作為選擇器2 |
|---|---|---|
| 元素選擇器 | ? | ? |
| 類選擇器 | ? | ? |
| ID 選擇器 | ? | ? |
| 屬性選擇器 | ? | ? |
| 偽類選擇器 | ??（部分可以） | ? |
| 偽元素選擇器 | ? | ??（僅能單獨使用） |
?選擇器1 和 選擇器2 的定義：
- 選擇器1：祖先元素或匹配條件。
- 選擇器2：后代元素或進一步篩選條件。
合法組合：
- 后代選擇器：選擇器1 + 空格 + 選擇器2
- 交集選擇器：選擇器1 + 選擇器2（無空格）
- 偽類選擇器：選擇器 +?
:偽類非法組合原因：
- D 嵌套 ID：ID 是唯一的，不應在同一頁面多次出現。
- 偽類不能單獨使用：無論是祖先選擇器1還是后代選擇器2，
只要使用偽類(:hover)必須依附于某個具體的選擇器(元素/類/id選擇器)，偽類不能單獨使用。?
偽類不能單獨使用：無論是祖先選擇器1還是后代選擇器2，
只要使用偽類(:hover)必須依附于某個具體的選擇器(元素/類/id選擇器)，偽類不能單獨使用。?
在 CSS 中，偽類（pseudo-class） 是一種特殊的關鍵詞，用于表示元素的某種狀態或位置。例如：
:hover（鼠標懸停）:focus（獲得焦點）:active（被激活時）:nth-child()（特定子元素）它們必須依附在一個具體的選擇器(元素)上
類比:
你可以把偽類想象成一個“狀態修飾詞”，就像中文里的“正在跑步的人”中的“正在跑步”——它必須依附在一個“人”上才能有意義。
:hover、:focus 等偽類也一樣，必須依附在具體的元素、類或 ID選擇器 上。?如果你以后看到任何包含偽類的選擇器，都可以用你總結的這句話來判斷是否合法：
偽類不能單獨存在，必須依附于一個具體的選擇器。
選擇器 合法性 原因 :hover? 非法 偽類沒有依附對象 :hover :hover? 非法 兩個偽類都沒有依附對象 a:hover :hover? 非法 后代中不能單獨使用偽類 :hover a:hover? 非法 祖先選擇器非法 + 后代選擇器結構混亂 :hover .icon? 非法 祖先選擇器非法 .icon :hover? 非法 后代選擇器中偽類未依附對象 input:focus :checked? 非法 后代中不能使用偽類（尤其是 :checked）
選擇器 合法性 原因 實際含義 a:hover? 合法 :hover?依附在?a?元素上當鼠標懸停在? <a>?標簽上時生效.btn:hover? 合法 :hover?依附在?.btn?類上當鼠標懸停在 class 為? .btn?的元素上時生效a:hover .icon? 合法 :hover?依附在?a?上，.icon?是后代當鼠標懸停在? <a>?上時，選中其內部所有 class 為?.icon?的后代元素div:hover .icon? 合法 :hover?依附在?div?上，.icon?是后代當鼠標懸停在? div?上時，選中其內部所有 class 為?.icon?的后代元素input:focus? 合法 :focus?依附在?input?上當? input?獲得焦點時（比如點擊或 tab 到）生效div:hover a:hover? 合法 兩個偽類分別依附于? div?和?a當鼠標同時懸停在? div?和?a?上時生效（但實際是“a 在 div 內部”且被懸停）div a:hover? 合法 后代選擇器， :hover?依附在?a?上所有? div?內部的?a?被懸停時生效div:hover .menu span? 合法 :hover?依附在?div?上，.menu span?是后代當? div?被懸停時，選中?.menu?下的所有?span#menu:hover .submenu? 合法 :hover?依附在 ID 為?menu?的元素上當 ID 為? menu?的元素被懸停時，選中其內部 class 為?.submenu?的后代元素li:hover .submenu a? 合法 :hover?依附在?li?上，.submenu a?是后代當? li?被懸停時，選中其內部 class 為?.submenu?的元素下的所有?a合法的關鍵點：
- 偽類必須依附于一個具體的選擇器（如?
a、.class、#id）- 可以繼續使用后代選擇器結構（即：空格 + 子選擇器）
- 偽類不能單獨使用，也不能作為后代選擇器中的獨立部分
- 多個偽類可以共存，只要它們各自都有依附對象
| 選擇器1 類型 | 選擇器2 類型 | 合法組合示例 | 組合類型 | 效果說明 | HTML 示例 | 是否合法 |
|---|---|---|---|---|---|---|
元 素 選 擇 器 | 元素選擇器 | div p | 后代選擇器 | 所有 div 內部的 p 元素 |
表示一個? | ? 合法 |
| 類選擇器 | div .content | 后代選擇器 | 所有 div 內部 class 為 content 的元素 |
表示? | ? 合法 | |
| ID 選擇器 | div #header | 后代選擇器 | 所有 div 內部 id 為 header 的元素 |
表示? | ? 合法（但不推薦） | |
| 屬性選擇器 | div [type="text"] | 后代選擇器 | 所有 div 內部 type 屬性值為 text 的元素 |
表示? | ? 合法 | |
| 偽類選擇器 | div :hover | 后代選擇器 | 所有 div 內部被懸停的元素 |
表示? | ? 不合法（偽類不能單獨使用作為選擇器） | |
類 選 擇 器 | 元素選擇器 | .menu ul | 后代選擇器 | class 為 menu 的元素內部的所有 ul |
表示一個帶有? | ? 合法 |
| 類選擇器 | .box .item | 后代選擇器 | class 為 box 的元素內部 class 為 item 的元素 |
表示一個? | ? 合法 | |
| ID 選擇器 | .sidebar #nav | 交集選擇器 | class 為 sidebar 且 id 為 nav 的元素 |
表示一個? | ? 合法（但不推薦） | |
| 屬性選擇器 | .input[type="text"] | 交集選擇器 | class 為 input 并且 type 屬性值為 text 的元素 |
表示一個? | ? 合法 | |
| 偽類選擇器 | .link:hover | 偽類選擇器 | class 為 link 的元素處于懸停狀態時 |
表示一個? | ? 合法 | |
| ID 選擇器 | 元素選擇器 | #header nav | 后代選擇器 | id 為 header 的元素內的 nav |
表示一個? | ? 合法 |
| ID 選擇器 | 類選擇器 | #sidebar .link | 后代選擇器 | id 為 sidebar 的元素內 class 為 link 的元素 |
表示一個? | ? 合法 |
| ID 選擇器 | ID 選擇器 | #main #content | - | 兩個 ID 不應同時出現在同一元素上 | - | ? 不合法（ID 應唯一） |
| ID 選擇器 | 屬性選擇器 | #form[type="submit"] | 交集選擇器 | id 為 form 且 type 屬性值為 submit 的元素 |
表示一個? | ? 合法 |
| ID 選擇器 | 偽類選擇器 | #button:hover | 偽類選擇器 | id 為 button 的元素處于懸停狀態時 |
表示一個? | ? 合法 |
| 屬性選擇器 | 元素選擇器 | [type="text"] span | 后代選擇器 | type 屬性值為 text 的元素內部的所有 span |
表示一個? | ? 合法 |
| 屬性選擇器 | 類選擇器 | [type="text"].error | 交集選擇器 | type 屬性值為 text 并且 class 為 error 的元素 |
表示一個? | ? 合法 |
| 屬性選擇器 | 屬性選擇器 | [type="text"][placeholder="Enter"] | 交集選擇器 | type 屬性值為 text 并且 placeholder 屬性值為 Enter 的元素 |
表示一個? | ? 合法 |
| 屬性選擇器 | 偽類選擇器 | [type="text"]:focus | 偽類選擇器 | type 屬性值為 text 并獲得焦點的輸入框 |
表示一個? | ? 合法 |
| 偽類選擇器 | 元素選擇器 | li:hover span | 后代選擇器 | 當鼠標懸停在 li 上時，里面的 span 被選中 |
表示一個? | ? 合法 |
| 偽類選擇器 | 類選擇器 | :hover .icon | ?
這樣的寫法在 CSS 解析時會被忽略，不會生效。 | /* ? 偽類:hover缺少依附對象 */ :hover .icon {? | ? 不合法 偽類:hover不能脫離主體選擇器單獨使用 | |
| 偽類選擇器 | 類選擇器 | a:hover .icon | 后代選擇器 | a:hover .icon { color: red; transform: scale(1.2); } |
| ? 合法? |
當鼠標懸停在?<a>?元素上時，其內部所有?class="icon"?的后代元素被選中 |
(空格) - 后代選擇器，表示內部嵌套關系
| |||||
| 偽類選擇器 | 類選擇器 | div:hover .icon | 后代選擇器 | 當鼠標懸停在 div 上時，選中其內部所有 class="icon"? 的后代元素 | <div> <p class="icon"></p> <span class="icon"></span> </div> | ? 合法 |
中間有一個空格，表示是?后代選擇器。 | ||||||
| 偽類選擇器 | ID 選擇器 | div:hover #footer | 交集選擇器 | 當 div 處于懸停狀態時，其內部 id 為 footer 的元素 |
表示一個? | ? 合法 |
| 偽類選擇器 | 屬性選擇器 | input:focus[type="text"] | 交集選擇器 | 當 type 屬性值為 text 的輸入框獲得焦點時 |
表示一個? | ? 合法 |
| 偽類選擇器 | 偽類選擇器 | a:hover :hover | ? 不合法 | |||
| 偽類選擇器 | 偽類選擇器 | :hover :hover | - | - | ? 不合法 | |
?div :hover 能作為后代選擇器嗎?
div :hover {}
div：是一個元素選擇器；:hover：是一個偽類；- 中間有空格：表示這是一個后代選擇器。雖然語法上看起來像“后代選擇器”
所以瀏覽器會把它解析為：“選中所有在
<div>元素內部的、處于懸停狀態的元素”。?在后代選擇器中，選擇器2 必須是一個完整的選擇器（如元素、類、ID 等），不能只是一個偽類（如
:hover）。所以:hover并不能單獨作為“選擇器2”，因為偽類
:hover不能單獨作為一個選擇器，:hover不是一個“標簽”或“元素”，它只是描述某種狀態（鼠標懸停），不能脫離具體元素使用。偽類:hover必須依附在一個具體的選擇器上(可以是元素選擇器? ID選擇器? 類選擇器)。?是合法且常用的寫法:
a:hover {} p:hover {} input:hover {}div:hover p {}是不合法/不推薦的:
:hover {}div :hover {}
我給后代選擇器的選擇器1? 或者選擇器2? 任意一個選擇器添加:hover 偽類選擇器可以嗎? 添加后 還是后代選擇器??
完全可以！
組合方式 是否合法？ 示例 僅選擇器1 加偽類 ? div:hover p {}僅選擇器2 加偽類 ? div p:hover {}兩者都加偽類 ?（合法）??但要謹慎使用 div:hover p:hover {}
| 寫法 | 類型 | 實際含義 | 推薦使用？ |
|---|---|---|---|
| :hover?? | 是一個偽類 。偽類 :hover 不能單獨作為一個選擇器，:hover 不是一個“標簽”或“元素”，它只是描述某種狀態（鼠標懸停），不能脫離具體元素使用。偽類 :hover必須依附在一個具體的選擇器上(可以是元素選擇器? ID選擇器? 類選擇器)。 | ||
div :hover | 中間有空格 語法上看起來像“后代選擇器+偽類選擇器” | “div 內部所有被懸停的元素”， 而不是“div 本身被懸停”。 | ? 不合法/不推薦??語義不清 偽類 |
div:hover | 元素選擇器+偽類選擇器 | 當前被懸停的 div 自身 | ? 合法，作用于div自身樣式上 |
div:hover p | 中間有空格 父元素選擇器+偽類選擇器:hover +后代選擇器p 的組合。 |
| ?當鼠標懸停在 (強調“整個區域懸停時統一變化”) div:hover p { background-color: yellow; } 只要鼠標在 |
| div p:hover?? | 中間有空格 父元素選擇器+后代選擇器p + 偽類選擇器:hover 的組合。 |
| ?<div> 中所有的 <p> 元素被鼠標懸停時應用樣式。(強調“只對被懸停的 p 生效”) div p:hover { color: red; } 當鼠標移到某個 |
| div:hover?p:hover | 中間有空格 父元素選擇器div+偽類選擇器:hover+后代選擇器p+偽類選擇器:hover組合 |
| 只有當鼠標既懸停在 div:hover p:hover { border: 1px solid red; } 只有當兩個條件都滿足時，才會生效。 |
?后代選擇使用案例:??
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 父選擇器div 后代選擇器p {} *//* 找到div的兒子p設置文字顏色是紅色 */div p{color: red;}/* 父選擇器div 后代選擇器a {} *//* 找到div的孫子a設置文字顏色是綠色 */div a{color: green; }</style>
</head>
<body><div>這是一個div標簽(無后代)</div><!-- 后代: 兒子p --><div><p>div標簽的后代(兒子)p標簽</p></div><!-- 后代: 孫子a --><div><p><a>div標簽的后代(孫子)a標簽</a></p></div> <!-- 后代: 兒子p --><!-- 后代: 孫子a --><div><p>div標簽的后代(兒子)p標簽<a>div標簽的后代(孫子)a標簽</a></p></div></body>
</html>??
? 5.2子代選擇器
根據 HTML 標簽的嵌套關系，選擇父元素 子代中 滿足條件的元素
子代選擇器語法：
選擇器1 > 選擇器2 { css }先通過選擇器1找到一堆標簽,在這一推標簽的子代（兒子）中找到滿足選擇器2的標簽，設置樣式
注意點：
1. 子代只包括：兒子
2. 子代選擇器中，選擇器與選擇器之前通過 > 隔開
?子代選擇器使用案例:
div > p?選擇了?div?下的所有直接?p?子元素，并將它們的文本顏色設為綠色- 在你的?
p?標簽內部有一個子標簽a。由于 CSS 的繼承特性，除非?a?標簽有特定的顏色定義覆蓋其父元素（p?標簽）的顏色，否則它會繼承父元素（p?標簽）的顏色(綠色)屬性。這就是為什么即使?a?標簽不是?div?的直接子元素，它的文本也會顯示為綠色的原因。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> /* div的兒子p標簽文字顏色是綠色 */div>p {color: green;}</style></head>
<body><div>父級div<p >父級div的兒子p標簽</p><p>父級div的兒子p標簽 <a >父級div的兒子p標簽里面的孫子a標簽</a> </p></div>
</body>
</html>
子代選擇器 的組合使用案例:
div > p > a {}是一個 子代選擇器 的組合使用。這條規則只會作用有效與于
<a>標簽，因為<a>標簽既是<p>標簽的直接子元素，且這個<p>標簽也是<div>標簽的直接子元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> /* div的兒子p標簽文字顏色是綠色 */div>p {color: green;}div>p>a{color: red;} </style></head>
<body><div>父級div<p >父級div的兒子p標簽   <span>父級div的兒子p標簽里面的孫子span標簽</span> </p> <p>父級div的兒子p標簽   <a >父級div的兒子p標簽里面的孫子a標簽</a> </p></div>
</body>
</html>
后代選擇器 和?子代選擇器的組合案例:
?div > p a {}???
div > p a{ }并不是單獨的選擇器類型，而是?兩個選擇器的組合使用.選擇所有位于
<div>元素下的 直接子元素<p>，然后在這個<p>元素下，再選擇所有<a>? 元素（無論嵌套多少層），并對它們應用樣式。
?1.>是 子代選擇器?
- 表示“緊接在其父元素下的直接子元素”。
div > p?表示：選擇所有?作為?<div>?直接子元素的?<p>?元素。? ?? 2.?
p a?空格是 后代選擇器?
- 表示“任何嵌套在前一個元素中的目標元素”，不管嵌套多深。
p a?表示：選擇所有?在?<p>?元素內部的?<a>?元素，不管是子元素、孫子元素還是更深層嵌套的。
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> /* div的兒子p標簽文字顏色是綠色 */div>p {color: green;}/* 標簽p的兒子a標簽 孫子標簽span 文字顏色都是粉色 */ div>p a{color:pink;}</style>
</head>
<body><div>父級div<p>父級div的兒子p標簽   <a >父級div的兒子p標簽里面的孫子a標簽  <span>標簽p的孫子標簽span</span> </a> </p></div></body>
</html>
?5.3并集選擇器:,隔開
同時選擇多個標簽，設置相同的樣式
并集選擇器語法：
選擇器1 ， 選擇器2， 選擇器3{ css }找到 選擇器1 和 選擇器2? 選擇器3 選中的標簽，設置樣式
注意點：
1. 并集選擇器中的每組選擇器之間通過 , 分隔
2.并集選擇器中的每組選擇器可以是基礎選擇器或者復合選擇器
3.并集選擇器中的每組選擇器通常一行寫一個，提高代碼的可讀性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p div span h2 文字顏色是紅色 *//* 選擇器1, 選擇器2 {} */p, div, span,h2 {color: red;}</style></head>
<body><h1>h1</h1><h2>h2</h2><p>ppp</p><div>div</div><span>span</span></body>
</html>
5.4交集選擇器：緊挨著
同時滿足兩個或多個選擇條件的同一個元素。
在 CSS 中，交集選擇器指的是通過組合不同類型的選擇器來精確地定位頁面上的元素。它允許你根據多個條件來選擇元素，這些條件可以是基于類型、類名、ID、屬性等。交集選擇器通常用于提高樣式的特異性，確保樣式只應用于滿足所有指定條件的元素。
交集選擇器語法：
選擇器1選擇器2 { css }（既又原則）找到頁面中 既 能被選擇器1選中，又 能被選擇器2選中的標簽，設置樣式
注意：
1. 交集選擇器中的選擇器之間是緊挨著的，沒有空格分隔
2. 交集選擇器中如果有標簽選擇器，標簽選擇器必須寫在最前面
常見形式：
A.B /* 必須是 A 標簽，并且具有 class="B" */ <A class="B></A>div.active /* 表示：既是 <div> 又有 class="active" 的元素 */ <div class="active"></div> p.highlight /* 表示：既是 <p> 又有 class="highlight" 的元素 */ <p class="highlight"></p>?
元素和類名的交集選擇器
這種選擇器要求元素同時匹配一個特定的HTML標簽和一個特定的類名。
?語法:
?元素.類名{}
在這個例子中，只有 <p> 元素且帶有 important 類的文本會被設置為紅色。而 <span> 雖然也有 important 類，但由于它不是 <p> 元素，所以不會被選中。
p.important {color: red;
}<p class="important">這是一個重要段落。</p>
<span class="important">這不是一個段落。</span>元素和ID的交集選擇器
雖然ID應該是唯一的，但在某些情況下，你可能希望基于元素標簽進一步細化選擇。
語法：
標簽#id { /* 樣式規則 */ }
注意：
此方法不推薦使用，因為ID應該是唯一的，最好直接用
#header來選擇。但如果確實需要基于類型進一步篩選，則可以這樣做。
<div id="header">這是頭部</div>
<p id="header">這不是頭部</p>div#header {background-color: blue;
}類名之間的交集選擇器
你可以將同時多個類名結合在一起，以更精確地定位元素。
語法：
.class1.class2 { /* 樣式規則 */ }
在這個例子中，只有同時包含
note類名 和important類名的<p>元素會被應用樣式。
<p class="note important">這是一個重要的注釋。</p>
<p class="note">這是一個普通的注釋。</p>
<p class="important">這是一個重要的文本。</p>.note.important {font-weight: bold;color: red;
}元素div? 元素p? 這2個元素不能組成交集選擇器?
那能組合成那些選擇器?
?元素div? 元素p? 這2個元素不能同時組成交集選擇器
交集選擇器是:一個元素同時滿足多個條件。這里是2個不同元素了,不符合交集選擇器的規則//html不識別這個divp <divp><divp>?改正:1.元素div? 類.p可以組成交集選擇器
<div class="p"><div>2.元素div? 元素p組成并集選擇器
div, p {color: blue; }
| 寫法 | 類型 | 含義 | 是否合法 |
| div | 元素選擇器 | 所有?<div>?元素 | ? 是 |
p | 元素選擇器 | 所有?<p>?元素 | ? 是 |
divp | 元素選擇器 | <divp>?標簽（非標準） | ? 不是合法 HTML |
| div p | 后代選擇器 | 選擇<div>標簽元素?內部的所有?后代元素<p> | ? 是 |
| div > p | 子代選擇器 | ?? 選擇了 <div>標簽元素內部的所有直接 子元素p? (非直接子元素p不會被選擇) | ? 是 ?/* div元素的直接兒子p標簽文字顏色是綠色 */ |
| div,p | 并集選擇器 | 同時選中所有? div, p { color: blue;} | ? 是 |
| div.my-class | 交集選擇器 | 只有是 <div>標簽元素 并且有類名 class="my-class" 的標簽元素會被選擇 其他的都不會被選擇 div.my-class { color: red; } | ? 是 <div class="my-class"></div> |
衍生 如果p不是標簽元素? ?是個class="p"類呢？
| 寫法 | 類型 | 含義 | 是否合法 |
| div | 元素選擇器 | 所有?<div>?元素 | ? 是 |
.p | 類選擇器 | 所有?class="p"?的元素 | ? 是 |
| div.p | 交集選擇器 | 必須是? div.p { color: red; } | ? 是 <div class="p"></div> <p class="p"></p> <a class="p"><a> |
| div .p | 后代選擇器 | 選擇 <div> 內部的 所有class="p" 的元素 | ? 是 <div> <div class="p"><div> </div> |
| div, .p | 并集選擇器 | 選擇所有 <div>元素 和所有 class="p" 元素 | ? 是 <div class="p"><div> <div ><div> |
后代選擇器VS交集選擇器VS并集選擇器區別
| 選擇器類型 | 關鍵區別 | 含義 | ? ? LESS 寫法 | 編譯后 CSS 寫法? | 示例 HTML 結構? ? |
| 后代選擇器 | 空格表示層級關系，匹配一個父元素內的另一個子元素 | 選中某個元素內部的另一個子元素。 | div { .b { ... } } 或 div { & .b {...}? } | div .b { ... }? div元素選擇器與.b類選擇器之間有空格隔開 | <div> <span class="b"> 內容 </span> </div>? ? |
“父親里面的兒子”?—— 父元素內的子元素。 | 可以是任意層級的嵌套。 | ||||
| ?比喻:父子之間鬧矛盾 之間產生距離隔隙 | |||||
| 交集選擇器? | 沒有空格，表示同一個元素上存在多個類名 | 選中同時具有多個類或屬性的同一個元素 | div { &.b { ... } }? | div.b { ... }? | ? <div class="b"> 內容</div> 或 <div class="div b">內容</div>? ? |
| 類似于邏輯“與”操作。 | |||||
| 并集選擇器 | 使用逗號分隔，表示多個獨立的選擇器共享相同的樣式 | 選中多個不同的獨立選擇器，并為它們應用相同的樣式規則 | ? div, .b { ... }? | ? div, .b { ... } | ? ? <div>內容</div> 和 <span class="b">內容</span>? ? |
類似于邏輯“或”操作。 |
? ? ? ? ?
? ? ?
如何區分這些選擇器？
1.?看是否有空格：
- 空格：后代選擇器（
.ancestor .descendant） - 無空格：交集選擇器（
.class1.class2）
2.?看是否有逗號：
- 逗號：并集選擇器（
.selector1, .selector2）
3.?看是否使用?&：
&?直接跟類名：交集選擇器（&.class）&?后面有空格再跟類名：后代選擇器（& .class）
后代選擇器案例1:? ?
? 在less文件中
.father {.son2 {color: blue;}
}? 編譯后的 CSS：
.father .son2 {color: blue;
}? ?HTML 示例：
<div class="father"><div class="son2">背景顏色變黃。</div>
</div>
.son2?是?.father?的后代選擇器表示“所有在?
.father?元素內部的?.son2?元素”
后代選擇器案例2:?
? 在less文件中
.father {& .son2 {color: blue;}
}編譯后的 CSS：
.father .son2 {color: blue;
}?HTML 示例：
<div class="father"><div class="son2">背景顏色變黃。</div>
</div>
&?表示?.father
& .son2?→?.father .son2中間有空格?這是一種顯式寫法，更清晰地表明了是后代選擇器
.son2?是?.father?的后代選擇器表示“所有在?
.father?元素內部的?.son2?元素”
交集選擇器案例:
? 在less文件中
.father {&.son2 {color: red;}
}? ? 編譯后的 CSS：
.father.son2 {color: red;
}?HTML 示例：
<button class="father son2">邊框變藍。</button>
&?表示?.father
&.son2?→?.father.son2中間沒有空格??.father.son2是交集選擇器
這表示一個元素同時具有?
class="father son2"，即兩個類名都在同一個元素上不是父子關系，而是同一個元素擁有兩個類名
并集選擇器案例:
? 在less文件中
.father{.son3,.son4{font-size: 24px;}}? 編譯后的 CSS：
.father .son3,
.father .son4 {font-size: 24px;
}HTML 示例：
<div class="father"> <div class="son3"></div><div class="son4"></div>
</div>
.son3,.son4=.father .son3,.father .son4 ?并集選擇器
.son3類選擇器 是.father類選擇器的后代選擇器
.son4類選擇器 是.father類選擇器的后代選擇器
| 寫法 | 類型 | 含義 | 示例 HTML |
|---|---|---|---|
| 后代選擇器 |
|
|
| 后代選擇器 |
|
|
| 交集選擇器 | .father.son2{} | <div class="father son2"></div> |
.father{ } | 并集選擇器 | .father .son3, ... | <div class="father">? <div class="son3"></div> <div class="son4"></div> </div> |
后代選擇器交集選擇器并集選擇器綜合使用案例:
| less寫法 | 類型 | 編譯后 CSS | 含義 |
header { .icon-left { ... }? ? } | 后代選擇器（隱式） | header .icon-left {} | 在html中所有 header 元素內部的 class ="icon-left" 的子元素 被選中樣式 |
header {? & .icon-left2 { ... }? ?} | 后代選擇器（顯式） | header .icon-left2 {} | 在html中所有 header 元素內部的 class ="icon-left2" 的子元素 被選中樣式 |
因為明確地用了?& | |||
header { &.icon-left3 { ... } } | 交集選擇器 | header.icon-left3 {} | 在html中? 必須是 header 元素并且同時具有 class="icon-left3" 的元素(就是header)? 被選中樣式 <header class="icon-left3"> </header> |
?header { .icon-left4, .icon-left5{ ...?} ? } | header .icon-left4, header .icon-left5 是并集選擇器 | header .icon-left4, header .icon-left5 {} | 在html中? header標簽元素里的? 類class="icon-left4"的后代元素? ? 和 類class="icon-left5"的后代元素 才會被選中 <header> </header> |
header .icon-left4 是后代選擇器（隱式） | 在? | ||
header .icon-left5 是后代選擇器 （顯式） | 在?<header>?元素內部選中所有 class ="icon-left5"?的元素 |
?在less??
/* header元素選擇器 */
header{/* .icon-left -> header .icon-left 叫后代選擇器（隱式） */.icon-left {font-size: (22px);}/* & .icon-left2 -> header .icon-left2 帶有空格 叫顯示后代選擇器 （顯式）*/& .icon-left2{font-size: (23px);}/* &.icon-left3 -> header.icon-left3 沒有空格 叫著交集選擇器 */&.icon-left3{font-size: (24px);}/*.icon-left4,& .icon-left5 -> header .icon-left4, header .icon-left5 是并集選擇器.icon-left4 -> header .icon-left4 是后代選擇器（隱式）& .icon-left5 -> header .icon-left5 是后代選擇器（顯式）*/.icon-left4,& .icon-left5{
font-size: (25px);} }
在css中
/* header元素選擇器 */
header {}
header .icon-left {font-size: 22px;
}
header .icon-left2 {font-size: 23px;
}
header.icon-left3 {font-size: 24px;
}
header .icon-left4,
header .icon-left5 {font-size: 25px;
}
在html中
<header>
<div class="icon-left"></div>
<div class="icon-left2"></div>
<header class="icon-left3"></header><div class="icon-left4"></div><p class="icon-left5"></p></header>?5.5hover偽類選擇器?
作用：
:hover是 CSS 中的一種 偽類（pseudo-class），它用于在用戶將鼠標指針懸停在某個元素上時，應用特定的樣式給這個元素。基本語法法：
selector:hover {/* 鼠標懸停時的樣式 */ }在 CSS 中，
:hover偽類可以與各種類型的選擇器結合使用，以實現當用戶將鼠標懸停在元素上時應用特定的樣式。
1.selector?可以是任何合法的 CSS 選擇器。
selector是標簽選擇器（如?a,?div,?span）selector是類選擇器（如?.className）selector是ID選擇器（如?#idName）selector是屬性選擇器（如?[type="text"]）selector是子代選擇器(僅直接子元素? div > p:hover )selector是后代選擇器(所有后代中符合條件的 a? div a:hover )
selector是多類名交集選擇器(必須同時擁有這兩個類 ?.box.highlight:hover )
selector是組合選擇器(多個選擇器統一處理? a:hover, button:hover )2.:hover：當鼠標懸停在這個選擇器選中的元素上時，就會應用括號里的樣式。
注意事項：?
1. 偽類選擇器選中的元素的某種狀態
2.
:hover?在手機上不生效怎么辦？移動設備通常不支持?:hover，可以考慮使用 JavaScript 或?:active?替代3.
:hover?被其他樣式覆蓋了怎么辦？檢查特異性（specificity），確保你的?:hover?規則優先級更高。4.如何讓?
:hover?動畫更平滑？使用?transition?屬性實現平滑過渡。常見的偽類有：
偽類 含義 :hover鼠標懸停時的狀態 :active元素被激活時（如點擊） :focus元素獲得焦點時 :visited?/?:link鏈接的不同狀態 :nth-child()選擇第 n 個子元素
:hover 什么時候應該寫在父容器上 ？什么時候寫在子元素上?
是否將 :hover 寫在父容器上，取決于你的交互設計目標。
如果希望“整體聯動感應”、“聯動動畫”，就寫在父容器；
如果希望“局部響應”、“各自獨立”，就直接寫在子元素上。
寫法 觸發方式 適用場景 .father:hover .child? ?? 鼠標懸停在父元素任意位置觸發子元素變化 整體感應，如菜單展開、動畫觸發等 .child:hover 鼠標懸停在子元素上才觸發 ?局部感應，如按鈕懸停變色等
:hover推薦寫在父容器上的情況：
:hover 父級控全局?
?場景 | ?原因? | ?示例 |
| 需要整體感應觸發效果 | ?用戶懸停整個區域時就觸發子元素變化? | ?雙開門動畫、導航菜單展開等 |
| 子元素本身可能被隱藏或移出可視區? | ?如果只對子元素寫 hover，用戶很難觸發? | ? 折疊面板、側邊欄動畫 |
| 多個子元素聯動 | 在父容器懸停任意一個區域，多個子元素一起動 | ?動畫組合、按鈕組交互 |
如果你對 .father:hover .left 設置動畫：
只要鼠標在 .father 范圍內，不管在哪，.left 和 .right 就會一起動；鼠標懸停在整個門前，門就打開 觸發面積大，用戶更容易操作,動畫更加自然流暢。
.father:hover .left,
.father:hover .right {transform: translate(...);
}+----------------------------+
| father |
| +--------+ +--------+ |
| | .left | | .right | |
| +--------+ +--------+ |
+----------------------------+:hover推薦寫在子元素上的情況：
:hover 子級限局部；
?場景 | ?原因? | ?示例 |
| 只想控制單個子元素的狀態變化 | 不希望影響其他子元素 | 單個按鈕懸停變色 |
| 每個子元素有獨立的交互邏輯? ?? | 不同子元素需要不同的觸發條件 | 多個圖標分別放大、旋轉 |
| 使用了 JavaScript 控制狀態 | CSS 的 hover 和 JS 行為沖突 | 自定義組件、輪播圖等?? |
.left:hover {transform: scale(1.2);
}.right:hover {background-color: red;
} :hover寫在父容器上-雙開門案例?
?2. ?雙開門動畫（推薦用父容器試用 :hover）
? ?當鼠標懸停在父容器上時，通過 transform: translate 左右移動來改變子元素的位置，模擬出“雙開門”的效果。
? ?
? ?把 :hover 寫在父容器上（.father:hover .left），是為了讓“鼠標懸停在整個父容器區域”時就觸發動畫效果；
? ? 而如果寫在子元素上（.left:hover），則只有“鼠標懸停在子元素本身”時才會觸發。
? ?
優點：
?用戶更容易觸發動畫；用戶鼠標放在整個門區域就能開門；
更適合“整體感應”的交互設計（比如“雙開門”效果）；
用戶體驗更好，不需要精準懸停在子元素上。不會出現“開一半又關掉”的尷尬。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* .father設置 display: flex; 后，.father 成為了一個 Flex Container。
.left 和 .right 作為直接子元素成為了 Flex Items。
因為 flex-direction 的默認值是 row，所以這些子元素會沿著水平方向（從左到右）依次排列。
子元素 .left 和 .right 都被設置了 width: 50%;，這意味著每個子元素占據父容器寬度的一半，剛好可以并排顯示在同一行。*/*{padding: 0;margin: 0;}/* 1. 布局：父子結構，父級是大圖，子級是左右小圖 */.father {display: flex;flex-direction:row; /* 默認值是 row，所以這些子元素會沿著主抽水平方向（從左起點到右）依次排列。 */margin: 0 auto;width: 1366px;height: 600px;background-image: url(./images/bg.jpg);overflow: hidden; /*隱藏溢出的內容 */}.father .left,
.father .right{width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all .5s;
}/* .left 取最左邊的背景圖片fm.jpg */
.father .left{background-position: left 0;
}/* .right 取最右邊的背景圖片 fm.jpg*/
.father .right{
background-position: right 0;
}/* 2. 雙開門動畫（推薦用父容器試用 :hover）當鼠標懸停在父容器上時，通過 transform: translate 左右移動來改變子元素的位置，模擬出“雙開門”的效果。把 :hover 寫在父容器上（.father:hover .left），是為了讓“鼠標懸停在整個父容器區域”時就觸發動畫效果；而如果寫在子元素上（.left:hover），則只有“鼠標懸停在子元素本身”時才會觸發。優點：用戶更容易觸發動畫；用戶鼠標放在整個門區域就能開門；
更適合“整體感應”的交互設計（比如“雙開門”效果）；
用戶體驗更好，不需要精準懸停在子元素上。不會出現“開一半又關掉”的尷尬。*/.father:hover .left { transform: translate(-100%); } .father:hover .right { transform: translateX(100%);}</style>
<body><div class="father"><div class="left"></div><div class="right"></div></div>
</body>
</html>
單一元素選擇器 +偽類選擇器?:hover的組合
a:hover：當用戶將鼠標懸停在?<a>?標簽上時，鏈接的顏色變為紅色，并添加下劃線,背景為綠色。
- a是元素選擇器；
:hover?是偽類選擇器；- 它們組合在一起形成一個完整的元素選擇器 + 偽類選擇器的組合：
a:hover；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 標簽選擇器 + :hover */a:hover {text-decoration: underline;color: red;background-color: green;}</style>
</head>
<body><a href="#">這是超鏈接</a>
</body>
</html>類選擇器 +偽類選擇器?:hover
.button:hover：當用戶將鼠標懸停在帶有?class="button"?的按鈕上時，按鈕變成綠色，變成圓角 文字變為白色 鼠標變成等待狀態。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 類選擇器 */.button{width: 100px;height: 50px;background-color: #e0e0e0; /* 默認背景顏色 */color: black; /* 默認文本顏色 */padding: 10px 20px; /* 內邊距 */border-radius: 5px; /* 圓角 */cursor: default; /* 默認光標 */transition: all 0.3s ease; /* 平滑過渡效果 */}/* 類選擇器 + :hover */.button:hover{width: 200px; /* */height: 100px; /* */ background-color: #4CAF50; /*懸停時背景顏色 */color: white; /* 懸停時文本顏色 */ padding: 10px 20px 15px 25px; /* 懸停時內邊距 即內容與邊框之間的空間。 */border-radius: 5px; /* 懸停時圓角 設置元素(button標簽)的圓角半徑。*/cursor: wait; /* 懸停時光標 改變鼠標指針的形狀。 default（默認箭頭） pointer 表示手型光標 text（I形光標，用于文本輸入區域）、wait（等待狀態的沙漏圖標） */ }</style>
</head>
<body><button class="button">登錄</button>
</body>
</html>
?
ID選擇器 +?偽類選擇器:hover
頁面加載時：
圖片會水平和垂直居中顯示在頁面的中央位置。
圖片的初始寬度被設置為100像素。
當鼠標懸停在圖片上時：
在懸停狀態下，圖片會被放大到原來的2.0倍大小。這種變化是通過?
transform: scale(2.0)?實現的，并且由于?transition?屬性的存在，放大過程會顯得非常流暢。scale?函數接受一個或兩個參數（分別表示X軸和Y軸的比例），這里我們只提供了一個參數，意味著在X軸和Y軸上都按相同的比例縮放。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 使用 Flexbox 讓父容器中垂直居中 */.div-container{display: flex; /* 啟用 Flexbox 布局，使子元素可以靈活地排列。 */ justify-content: center; /* 水平居中對齊div下的所有直接子元素。 */align-items: center; /* 垂直居中對齊div下的所有直接子元素。 */height: 100vh; /* 設置div容器的高度為視口高度的100%，確保它可以占據整個屏幕的高度，從而實現垂直居中。 */margin: 0; /* 移除默認的外邊距，避免不必要的空白。 */background-color: aqua; }/* 設置圖片的基本樣式 */#centered-image{display: block; /* 將圖片作為塊級元素顯示，這樣可以更容易地控制其布局。 */ margin: 0 auto; /* 設置左右外邊距為自動，使圖片水平居中。這是最簡單的方式之一，適用于單個圖片或塊級元素。 */width: 100px; /* 設置圖片的寬度為100像素。你可以根據需要調整這個值。 */transition: transform 0.3s ease; /* 定義一個過渡效果，當 transform 屬性發生變化時，變化會在0.3秒內平滑完成。ease 是一種緩動函數，使動畫開始緩慢，然后加速，最后減速結束。 */}/* ID選擇器 + :hover */#centered-image:hover{transform: scale(2.0); /* 在懸停狀態下，圖片會被放大到原來的2.0倍大小。*/ cursor: wait;}</style>
</head>
<body><a href="#">這是超鏈接</a><br> <br><button class="button">登錄</button><br> <br><!-- 創建一個容器用于垂直居中 --><div class="div-container" ><!-- 使用 img 標簽插入圖片 --><img id="centered-image" src="./images/3.jpg" alt="圖片加載失敗" /></div></body>
</html>
屬性選擇器 +?偽類選擇器:hover
input[type="submit"]:hover選擇器
input[type="submit"]: 是一種組合選擇器，它結合了 標簽選擇器 (input)和 屬性選擇器 ([type="submit"])，確保只對?<input>?類型為?submit?的元素應用樣式。?:hover:當用戶將鼠標懸停在?type="submit"?的輸入框上時，背景變紅，文字變白。注意:
如果你嘗試僅使用
[type="submit"]:hover，可能會導致意外的行為，因為這個選擇器不僅適用于<input>元素，還可能應用于任何其他具有type="submit"屬性的元素（盡管這種情況很少見）。為什么需要?
input?標簽名？
增加特異性：僅使用
[type="submit"]可能會匹配到所有帶有type="submit"屬性的元素，而不僅僅是<input>元素。雖然 HTML 規范中type屬性主要用于<input>元素，但理論上其他元素也可能包含類似的屬性（盡管這不常見）。提高性能：瀏覽器解析 CSS 選擇器時，從右向左進行匹配。這意味著如果只使用
[type="submit"]，瀏覽器需要檢查每個元素(標簽)是否具有該屬性。而使用input[type="submit"]，則可以先篩選出所有的<input>元素，然后再檢查這些元素是否有type="submit"屬性，這樣可以減少不必要的檢查，提升性能。明確意圖：通過明確指定
input標簽，代碼更具可讀性，表明我們只想對<input>元素應用樣式，而不是其他類型的元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 屬性選擇器 + :hover */input[type="submit"]:hover {background-color: #f44336;color: white;}</style>
</head>
<body><input type="text" value="這是一個文本輸入框"><br><input type="submit" value="提交表單" />
</body>
</html>
??
子代選擇器 +?偽類選擇器:hover
只對某個父元素下的直接子元素設置懸停效果。
?div>p:hover{}
只有div的直接子元素p 鼠標懸停生效 ? 其他的非p直接子元素(span) ?鼠標懸停無效
只有第一個
<p>會變藍色，這里p是div的直接子元素第二個
<p>不會變藍色，因為它不是div的直接子元素。
<style>/* 子代選擇器 + :hover *//* 只有div的直接子元素p 鼠標懸停生效 其他的直接子元素(span) 鼠標懸停無效 */div>p:hover{color: blue;}</style><body><div><p>我是 div 的直接子元素 p(鼠標懸停生效)</p><!-- CSS具有繼承性 因為 直接子元素p 鼠標懸停生效 所以P的子元素標簽span 鼠標懸停我也效 --><p>我是 div 的直接子元素 p(鼠標懸停生效) <span>我不是 div 的直接子元素(div的孫元素) (鼠標懸停我也效) </span></p> <span><p>我不是 div 的直接子元素</p></span> </div></body>
后代選擇器 +偽類選擇器?:hover
公式:
祖先選擇器 后代選擇器:偽類 { ... }鼠標懸停生效于某個元素(標簽)內部的指定的這個后代元素(無論這個后代標簽是子標簽 孫標簽 重孫標簽都有效)。
div a:hover {} .menu li:last-child {} #nav ul > li:hover {}
div p:hover {} 是一個典型的 父元素選擇器+后代選擇器p + 偽類選擇器:hover 的組合。
在
div元素內部的所有后代?<p>元素中，當鼠標懸停在某個后代元素<p>上時，應用該樣式。偽類:hover是加在 后代元素p上的，而不是整個“元素 + 偽類”的結構。
部分 類型 含義 div元素選擇器 所有? <div>?元素p元素選擇器 所有? <p>?元素:hover偽類 鼠標懸停狀態 div p:hover是后代選擇器 + 偽類的組合
偽類?
:hover是作用在?p?上的div 下的 p 元素在鼠標懸停時的樣式
div:hover p {}?是一個典型的 父元素選擇器+偽類選擇器:hover +后代選擇器p?的組合。
示例：所有嵌套在 div 元素內的后代元素 a被 鼠標懸停狀態時都會變色
<style>/* 后代選擇器 + :hover */div a:hover{background-color: green;color: rgb(70, 4, 70);}</style><!-- 兩個鏈接都會變紫色，因為它們都在 div 內部。 --><div><a href="#">一級鏈接</a><p><a href="#">二級鏈接</a></p><span><p><a href="#">三級鏈接</a></p></span></div>多類名交集選擇器 +?偽類選擇器:hover
僅當元素同時擁有多個類時才觸發懸停效果。
示例：同時同時具有?.box?和?.highlight 類名的元素標簽才會變色
<style>
/* 多類名交集選擇器 + :hover */.box.highlight:hover {background-color: yellow;}</style><div class="box highlight">我會變黃</div><div class="box">我不會變色</div><div class="highlight">我也不會變色</div>
組合選擇器 + 偽類選擇器:hover
給多個不同的元素統一設置懸停效果
示例：所有 a 和 button 在 hover 時都加陰影
<style>/* 組合選擇器 + :hover */a:hover,button:hover {box-shadow: 0 0 5px rgba(0,0,0,0.3);}</style><a href="#">鏈接</a><button>按鈕</button>
?5.6結構偽類選擇器
結構偽類選擇器是 CSS 選擇器的一種，允許你根據元素在其位置上的上下文來選擇它們，而無需依賴于類名或 ID。這些結構偽類選擇器提供了更靈活和動態的方式來定位頁面中的元素。
作用與優勢：
1. 作用：根據元素在HTML中的結構關系查找元素
2. 優勢：減少對于HTML中類的依賴，有利于保持代碼整潔
3. 場景：常用于查找某父級選擇器中的子元素
常見的結構偽類選擇器
結構偽類選擇器 說明 E:first-child {}?
(
E是子元素)選擇直接父元素中的第一個子元素E。并且是E元素
E :last-child{}
(
E是子元素)選擇直接父元素中的最后一個子元素E。并且是E元素 E
:nth-child(n){}(
E是子元素)?選擇直接父元素中的第n個子元素E。并且是E元素 ?E
:nth-last-child(n){}(
E是子元素)選擇直接父元素中的倒數第n個子元素E。并且是E元素 ?E:nth-of-type(n){}
(
E是子元素)只在直接父元素的同類型(E)子元素范圍內,匹配選擇第n個 注意點:
?①E的注意點:
E?是直接父元素下的子元素；- E是其直接父元素下的第一個子元素（
E:first-child）- E是其直接父元素下的最后一個子元素（
E:last-child）；- E本身還必須是?
E?類型的標簽（如?div、li、p?等）。②n的注意點:
- ???n為：0、1、2、3、4、5、6、……
- 通過n可以組成常見公式
功能 公式 偶數 2n,even 奇數 2n+1,2n-1,odd 找到前5個 -n+5 找到從第5個往后 n+5
結構偽類選擇器案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 選擇父元素中的第一個子元素。 */li:first-child{background-color: green;}/* 選擇父元素中的最后一個子元素。 */li:last-child{background-color: lightgreen;}/* 選擇父元素中的第n個子元素。 n=5 選擇父元素中的第5個子元素 */li:nth-child(5){background-color: blue;}/* 選擇父元素中的倒數第n個子元素 n=2 選擇父元素中的倒數第2個子元素 */li:nth-last-child(2){background-color: lightblue;}</style>
</head>
<body><ul><li>這是第1個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li></ul></body>
</html>
結構偽類選擇器-公式案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 選擇父元素中排列是2n(偶數)的子元素。 *//* li:nth-child(2n){background-color: blue;} *//* 選擇父元素中排列是2n+1(奇數)的子元素。 *//* li:nth-child(2n+1){background-color: blue;} *//* 選擇父元素中排列是4n(4的倍數)的子元素。 */li:nth-child(4n){background-color: blue;} </style>
</head>
<body><ul><li>這是第1個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li></ul></body>
</html>
?03.1-選擇器-結構偽類-案例-a:first-child{}
a:first-child{ }
?選中那些 既是 <a> 元素，同時又是其父元素的 第一個子元素a ?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 選中那些 既是 <a> 元素，同時又是其父元素的 第一個子元素a */a:first-child{background-color: lightblue;} </style>
</head>
<body><ul><li> <a href="#">這是第1個li里面的a1</a> <!--第一個 <li> 中的第一個 <a>會被選中 lightblue --><a href="#">這是第1個li里面的a2</a> <!--第一個 <li> 中的其他 <a> 標簽都不是第一個子元素（第一個已經是上面那個 <a> 了），所以它們不會被選中。 --><a href="#">這是第1個li里面的a3</a><a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><li><a href="#">這是第2個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第3個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第4個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第5個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第6個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第7個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> <li><a href="#">這是第8個li里面的a</a></li> <!-- 這個 <a> 是 <li> 的第一個子元素； 會被選中 lightblue --> </ul></body>
</html>
03.2-選擇器-結構偽類-案例-li a:first-child{}
?li a:first-child {}
?在 每一個<li> 元素內部； ?選中那些 <a> 元素，同時又是其直接父元素(li)的 第一個子元素 ?
- ?在每一個 <li>中找到第一個子元素a，?
- ?檢查 ?每一個 <li> 內部的第一個子元素如果是 <a>，都會被選中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 在 每一個<li> 元素內部； 選中那些 <a> 元素，同時又是其直接父元素(li)的 第一個子元素 */ /* 在每一個 <li>中找到第一個子元素a， *//* 檢查 每一個 <li> 內部的第一個子元素如果是 <a>，都會被選中。 */li a:first-child {background-color: lightblue;} </style>
</head>
<body><ul><li> <a href="#">這是第1個li里面的a1</a> <!--在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <a href="#">這是第1個li里面的a2</a> <!--在這個 <li> 中的其他 <a> 標簽都不是第一個子元素（第一個已經是上面那個 <a> 了），所以它們不會被選中。 --><a href="#">這是第1個li里面的a3</a><a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><li><a href="#">這是第2個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第3個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第4個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第5個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第6個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第7個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> <li><a href="#">這是第8個li里面的a</a></li> <!-- 在這個 <li> 中 a 是直接父元素（<li>）的第一個子元素 會被選中 lightblue --> </ul></body>
</html>
03.3-選擇器-結構偽類-案例-li:first-child{}
li:first-child{}
?選中父元素中的第一個子元素li。
- ?li 是子元素，不是父元素。
- ?li必須是它父元素下的第一個子元素。
- 如果它前面還有別的兄弟元素（不管是不是 <li>），那它就不是 :first-child。
不會被選中的情況舉例（加深理解）
情況 是否匹配
li:first-child
原因 <div>
<li>我是第一個子元素</li>
</div>
? 是 li是 父元素<div>?的第一個子元素，且是?<li><div>
<p>我才是第一個</p>
<li>我第二個</li>
</div>
? 否 這里的li不是父元素div第一個子元素 所以不會被選中 <div>
<span>
<li>我在 span 里</li>
</span>
</div>
? 否 <li>?不應該放在?<span>?里，而且不是直接子元素<ul>
<li>第一項</li>
<li>第二項</li>
</ul>
? 第一項匹配，第二項不匹配 只有第一個子元素li會被選擇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 選中父元素中的第一個子元素是li。li 是子元素，不是父元素。li必須是它父元素下的第一個子元素。 如果它前面還有別的兄弟元素（不管是不是 <li>），那它就不是 :first-child。*/li:first-child{background-color: lightblue;} </style>
</head>
<body><ul><!-- 只有第一個 <li> 是父元素 <ul> 的第一個子元素； 符合 li:first-child 的條件 會被選中為 lightblue --><!-- 這個 <li> 及其內部的所有內容（包括 <a> 標簽）都會顯示為 淺藍色背景。注意：不是 <a> 被設置了背景色，而是整個 <li> 被設置了背景色，所以 <a> 看起來也“被染藍了”，其實是背景透上來。 --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html>
?03.4-選擇器-結構偽類-案例-li:first-child a{}
? li:first-child a{}
?選擇父元素里第一個子元素是li ?且li里面的a標簽
li:first-child：表示它是其父元素的第一個子元素，并且它是一個?<li>。li:first-child a：在這個符合條件的?<li>?內部的所有?<a>?標簽都會被選中。只有第一個 <li> 是 <ul> 的第一個子元素 → 符合 li:first-child
?所以只有第一個 <li> 中的 所有 <a> 標簽 都會被 li:first-child a 選中 lightblue
其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 選擇父元素里第一個子元素是li 且li里面的a標簽 *//* 選中所有位于 li:first-child 元素內部的 <a> 元素 */li:first-child a{background-color: lightblue;} </style>
</head>
<body><ul><!-- 只有第一個 <li> 是 <ul> 的第一個子元素 → 符合 li:first-child所以只有第一個 <li> 中的 所有 <a> 標簽 都會被 li:first-child a 選中 lightblue --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><!-- 其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中 --><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html> 
03.5-選擇器-結構偽類-案例-li:first-child a:first-child{}
li:first-child a:first-child {background-color: lightblue;}
想在第一個?
<li>?中選中第一個?<a>?在整個列表中，只選中第一個
<li>里面 第一個子元素 是<a>標簽
li:first-child：選中的是其父元素（通常是?<ul>）下的第一個 子元素<li>；a:first-child：在這個?<li>?中，再找第一個子元素是?<a>的標簽。
- 只有第一個?
<li>?中的第一個?<a>?被選中；- 其他所有?
<a>?都不會被選中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 那如果只在第一個li中 去找第一個元素a 這個是什么公式呢? *//* 方法一: */
li:first-child a:first-child {background-color: lightblue;
} /* 方法二: */
/* li:nth-child(1) a:nth-child(1) {background-color: lightblue;
} */</style>
</head>
<body><ul><!-- 在整個列表中，只選中第一個 <li> 里面 第一個子元素 是 <a>標簽 --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><!-- 其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中 --><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html> 
?03.6-選擇器-結構偽類-案例-li:nth-child(1) a:nth-child(1){}
li:nth-child(1) a:nth-child(1){}
想在第一個?
<li>?中選中第一個?<a>?在整個列表中，首先找到父元素（
<ul>）下的第一個子元素<li>，然后在這個?<li>?內部查找第一個子元素且該子元素必須是?<a>?標簽。
li:nth-child(1)
- 選擇父元素（如?
<ul>）下的第一個?<li>?元素。
a:nth-child(1)
- 選擇某個父元素（在這里是?
<li>）下的第一個子元素，且這個子元素必須是?<a>?標簽。????? (換句話說，它會選擇每個
<li>中的第一個子元素a)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 那如果只在第一個li中 去找第一個元素a 這個是什么公式呢? *//* 方法一: */
/* li:first-child a:first-child {background-color: lightblue;
} *//* 方法二: */
li:nth-child(1) a:nth-child(1) {background-color: lightblue;
} </style>
</head>
<body><ul><!-- 在整個列表中，只選中第一個 <li> 里面 第一個子元素 是 <a>標簽 --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><!-- 其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中 --><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html> 
03.8-選擇器-結構偽類-案例-li:first-child a:nth-child(3){}
li:first-child a:nth-child(3) { }
選擇器只會選中第一個
<li>中的第三個<a>標簽，并對其應用樣式。
li:first-child：選擇父元素（在這里是?<ul>）下的第一個?<li>?元素。a:nth-child(3)：在選定的第一個?<li>?內部，選擇第三個子元素且該子元素必須是?<a>?標簽。注意事項
- 如果第一個?
<li>?中沒有至少三個?<a>?標簽，則沒有任何元素會被選中并應用樣式。nth-child(n)?選擇器是從 1 開始計數的，所以第三個子元素用?3?表示。如果你需要選擇第四個子元素，則應使用?4，以此類推。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 找到第一個li 里面的 第三個a 設置文字顏色是紅色 *//* 方法一: */ li:first-child a:nth-child(3) {background-color: lightblue;} /* 方法二: */
/* li:nth-child(1) a:nth-child(3) {background-color: lightblue;
} */</style>
</head>
<body><ul><!-- 在整個列表中，只選中第一個 <li> 里面 第一個子元素 是 <a>標簽 --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><!-- 其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中 --><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html> 
03.9-選擇器-結構偽類-案例-li:nth-child(1) a:nth-child(3){}
li:nth-child(1) a:nth-child(3){}
選擇器只會選中第一個
<li>中的第三個<a>標簽，并對其應用樣式。
li:nth-child(1)：選擇父元素（在這里是?<ul>）下的第一個?<li>?元素。a:nth-child(3)：在選定的第一個?<li>?內部，選擇第三個子元素且該子元素必須是?<a>?標簽。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 去掉列表的裝飾符號 */ul {list-style: none;} /* 找到第一個li 里面的 第三個a 設置文字顏色是紅色 *//* 方法一: */ /* li:first-child a:nth-child(3) {background-color: lightblue;} *//* 方法二: */li:nth-child(1) a:nth-child(3) {background-color: lightblue;
} </style>
</head>
<body><ul><!-- 在整個列表中，只選中第一個 <li> 里面 第一個子元素 是 <a>標簽 --><li> <a href="#">這是第1個li里面的a1</a> <a href="#">這是第1個li里面的a2</a> <a href="#">這是第1個li里面的a4</a><a href="#">這是第1個li里面的a5</a></li><!-- 其他 <li> 不是 <ul> 的第一個子元素 → 不符合 li:first-child，所以它們內部的 <a> 不會被選中 --><li><a href="#">這是第2個li里面的a</a></li> <li><a href="#">這是第3個li里面的a</a></li> <li><a href="#">這是第4個li里面的a</a></li> <li><a href="#">這是第5個li里面的a</a></li> <li><a href="#">這是第6個li里面的a</a></li> <li><a href="#">這是第7個li里面的a</a></li> <li><a href="#">這是第8個li里面的a</a></li> </ul></body>
</html> 
6鏈接偽類選擇器
常用于選中超鏈接的不同狀態
選中超鏈接的不同狀態，常用哪些鏈接偽類選擇器？
鏈接偽類選擇器語法 功能 a:link?{?} 選中a鏈接?未訪問過?的狀態 a:visited?{?} 選中a鏈接?訪問之后?的狀態 a:hover{?} 選中?鼠標懸停?的狀態 a:active?{?} 選中?鼠標按下?的狀態 注意點：
- 如果需要同時實現以上四種偽類狀態效果，需要按照LVHA順序書寫
? ? ?(記憶口訣：男盆友送了你一個LV 包包，你開心的HA哈笑)
- 其中:hover偽類選擇器使用更為頻繁，常用于選擇各類元素的懸停狀態
?7. 焦點偽類選擇器
用于選中元素獲取焦點時狀態，常用于表單控件
選中表單控件獲取焦點的狀態，可以使用什么焦點偽類選擇器？??
input:focus { background-color:skyblue; }效果：
表單控件獲取焦點時默認會顯示外部輪廓線
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 獲得焦點的狀態 *//* 獲得焦點: 把光標點到input里面; 失去焦點: 把光標從input里面拿出來 */input:focus {background-color: pink;}</style>
</head>
<body><input type="text"><input type="password"><input type="button">
</body>
</html>
?8.屬性選擇器
通過元素上的HTML屬性來選擇元素，常用于選擇input 標簽
選擇器語法：
選擇器 功能 E[attr] 選擇具有?attr?屬性?的?E?元素 E[attr="'val"] 選擇具有?attr?屬性并且屬性值等于?va1?的?E?元素 選中頁面中所有的文本框，使用屬性選擇器如何實現呢？
input[type="text"] { ?}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* text:背景色是粉色; password背景色是skyblue */input[type='text'] {background-color: pink;}input[type="password"] {background-color: skyblue;}/* input:nth-child(1) {} */</style>
</head>
<body><input type="text"><input type="password">
</body>
</html>
![[element-ui]el-table在可視區域底部固定一個橫向滾動條](http://pic.xiahunao.cn/[element-ui]el-table在可視區域底部固定一個橫向滾動條)
