16-CSS3新增選擇器

知識目標

  • 掌握屬性選擇器的使用
  • 掌握關系選擇器的使用
  • 掌握結構化偽類選擇器的使用
  • 掌握偽元素選擇器的使用

如何減少文檔內class屬性和id屬性的定義，使文檔變得更加簡潔？
可以通過屬性選擇器、關系選擇器、結構化偽類選擇器、偽元素選擇器。

1. 屬性選擇器

1.1 E[attribute]選擇器

E[attribute]選擇器用于選取標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性的標簽。其中，E可以省略，如果省略則表示可以匹配滿足條件的任意標簽。
例1：選取包含id屬性的<div>標簽：div[id]
例2：選取包含align屬性，屬性值為center的全部標簽：[align=center]

1.2 E[attribute~=value]選擇器

E[attribute~=value]選擇器用于選取標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性，包含某個value（代指屬性值字符）屬性值的標簽。
E[attribute]選擇器和E[attribute~=value]選擇器區別在于前者需要屬性和屬性值完全一致，后者只要標簽包含屬性值即可被選中。

1.3 E[attribute|=value]

E[attribute|=value]選擇器能夠選取帶有value屬性值或以value-開頭的屬性值的標簽，不包括兩個屬性的標簽。
例1： [class|=a] { } 選取屬性值為a或屬性值以a-開頭的標簽。一般用于匹配en-US、zh-CN 等。

1.4 E[attribute^=value]

E[attribute^=value]選擇器能夠選取以value開頭的屬性值的標簽。
例1：選取屬性值以one開頭的標簽 [class ^=one] {}

1.5 E[attribute$=value]

E[attribute$=value]選擇器用于選擇屬性值后綴為value（代指屬性值字符）字符的標簽。
例1： div[id$=section] 選取包含id屬性，且id屬性值以section字符串結尾的div標簽。

1.6 E[attribute*=value]

E[attribute*=value]選擇器用于選擇屬性值包含value（代指屬性值字符）字符的標簽。
例1：div[i*=section] 選取包含id屬性，且id屬性值包含“section”字符的<div>標簽

1.7 總結

選擇器和作用列表如下：
在這里插入圖片描述

2. 關系選擇器

2.1 子元素選擇器

子元素選擇器主要用來選擇父級標簽的子標簽，由符號“>”連接標簽名稱。
例如：h1>strong選取<h1>標簽中的子標簽<strong>標簽

2.2 兄弟選擇器

兄弟選擇器可以選擇位于同一個父標簽中，指定標簽后面，具有并列關系的子標簽。在CSS3中，兄弟選擇器分為鄰近兄弟選擇器和普通兄弟選擇器兩種。

2.2.1 鄰近兄弟選擇器

使用加號**“+”連接前后兩個選擇器。選擇器中的兩個子標簽從屬同一個父標簽，而且被選取子標簽必須緊跟指定的標簽。強調“緊接”，如A+B，選擇的B必須是A之后的第一個兄弟元素**。

2.2.2 普通兄弟選擇器

使用**“~”**來連接前后兩個選擇器。選擇器中的兩個子標簽從屬同一個父標簽，而且被選取子標簽需要位于指定的標簽后面。如A~B只要B是A后面出現的兄弟都能被選擇。

3. 結構化偽類選擇器

3.1 :root

:root選擇器用于匹配文檔根標簽，在HTML中，根標簽指的<html>標簽。因此使用:root選擇器定義的樣式，對所有頁面標簽都生效。

3.2 :not

:not選擇器可以排除設置的標簽或屬性。例如，h3:not(.one)會選取沒有類名.one的<h3>標簽。

3.3 :only-child

:only-child選擇器用于選取父標簽中的唯一子標簽，也就是說，如果某個父標簽僅有一個子標簽，使用:only-child選擇器可以選擇這個子標簽。例p:only-child能選中我是獨生子，而不滿足類型的div和多個孩子的標簽不能被選中。

<body><div><p>我是獨生子</p></div><div><div>我是獨生子，是div</div></div><div><p>我是第1個段落</p><p>我是第2個段落</p></div>
</body>

3.4 :first-child

:first-child選擇器用于選擇父標簽中的第一個子標簽。

3.5 :last-child

:last-child選擇器用于選取父標簽中的最后一個子標簽。

3.6 :nth-child(n)和nth-last-child(n)

:nth-child(n)選擇器用于選擇父標簽中的第n個子標簽。例如：選取父標簽中的第2個子標簽：:nth-child(2)。
:nth-last-child(n)用于選取父標簽中的倒數第n個子標簽。
此時還可以使用關鍵字、公式等進行選擇；
比如:nth-child(even), 選擇的是偶數孩子。
比如:nth-child(3n), 選擇的是3倍數的孩子。

3.7 :first-of-type和:last-of-type

:first-of-type選擇器用于匹配父標簽中第1個特定類型的子標簽。例如p:first-of-type，選擇父標簽中的第1個p類型的子標簽。
:last-of-type選擇器用于匹配父標簽中最后1個特定類型的子標簽。
nth-of-type(n)和nth-child(n)區別：前面的會把指定元素的例子排序序號再選，后面的會先排序，然后看當前的序號孩子是否滿足是指定元素。
在這里插入圖片描述

4. 偽元素選擇器

4.1 :empty

:empty選擇器用來選擇沒有子標簽或內容為空的所有標簽。

4.2 :target

:target選擇器用于突出顯示當前活動的目標元素。只有用戶單擊頁面中的超鏈接，并且跳轉到:target選擇器控制的元素后，:target選擇器所設置的樣式才會起作用。

4.3 :before :after

:before選擇器 / :after選擇器用于在被選取標簽的前面/后面插入內容(屬于行內元素，在文檔中找不到的，稱為偽元素)。在使用:before選擇器/ :after選擇器時必須配合content屬性來指定要插入的具體內容。
常用場景：1. 鼠標放上去出現的遮罩、圖層 2.
在這里插入圖片描述

5. 實踐

我會提供代碼但會將樣式刪除，接下來的案例題麻煩大家使用以上述學的知識來補充選擇器及樣式！！！可以在評論區上傳自己的代碼和樣例截圖哦！！！
提供的樣例代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 Selectors Example</title><!--  整體頁面樣式需求：1. 字體使用 Arial 或無襯線字體 2. 行高為 1.6    3. 頁面邊距為 20px-->
</head><body><!-- h1 樣式需求：1. 顏色為 #333     2. 字體大小為 2em   3. 文本居中對齊 4. 文本陰影為 2px 2px 4px rgba(0, 0, 0, 0.1)  --><h1>CSS3 Selectors Example</h1><!-- h2 樣式需求：1. 顏色為 #5552. 字體大小為 1.6em3. 底部有 1px 實線的 #ccc 顏色邊框4. 底部內邊距為 5px --><h2>屬性選擇器示例</h2><!-- a標簽樣式需求,可采用E[att="value"]的方式進行選擇：1. 顏色為橙色2. 去除下劃線3. 字體加粗 --><p>訪問 <a href="https://www.example.com" target="_blank">安全網站</a> 獲取更多信息。</p><!-- img[src^="images/"] 樣式需求：1. 邊框為 2px 實線的 #ccc 顏色2. 邊框圓角為 5px3. 陰影為 0 0 5px rgba(0, 0, 0, 0.3)--><p><img src="images/sample.jpg" alt="Sample Image"></p><!-- highlight樣式需求 采用*= 的方式：1. 背景顏色為黃色2. 字體大小為 1.1em--><p class="highlight">這是一個高亮顯示的段落。</p><!-- 樣式需求：  采用$=的方式1. 顏色為藍色2. 字體為斜體--><p>下載 <a href="document.docx">文檔</a> 了解詳情。</p><!-- important樣式需求：  采用~=選擇的方式1. 顏色為紅色2. 字體加粗3. 有下劃線--><p>這里有個 <span class="important">重要</span> 的信息。</p><!-- li[data-lang|="en"] 樣式需求：1. 背景顏色為淺藍色2. 字體大小為 0.9em--><!--  ul 樣式需求：1. 列表樣式類型為圓形2. 左內邊距為 20px--><ul><li data-lang="en-US">英文列表項1</li><li data-lang="fr-FR">法文列表項2</li><li data-lang="en-GB">英文列表項3</li></ul><!-- h3 樣式需求：1. 顏色為 #7772. 字體大小為 1.3em--><h3>兄弟選擇器示例</h3><!-- h3 + p 樣式需求：1. 字體為斜體2. 顏色為 #7773. 字體大小為 0.95em--><p>這是緊跟在h3后面的段落，使用鄰兄弟選擇器設置樣式。</p><!-- h3 ~ ol 樣式需求：1. 背景顏色為 #f9f9f92. 邊框為 1px 實線的 #ddd 顏色3. 內邊距為 10px--><!-- ul li:first-child 樣式需求：1. 字體加粗2. 字體大小為 1.1em3. 顏色為 #333--><!-- ul li:last-child 樣式需求：1. 有下劃線2. 字體為斜體--><!-- ul li:nth-child(3n) 樣式需求：背景顏色為 #eee--><!-- ol li:nth-child(even) 樣式需求：1. 顏色為紫色2. 字體大小為 1.05em--><!-- ol li:nth-child(odd) 樣式需求：顏色為 #555--><!-- ol 樣式需求：列表樣式類型為大寫羅馬數字左內邊距為 25px--><!-- p 樣式需求：顏色為 #666--><ol><li>有序列表項1</li><li>有序列表項2</li><li>有序列表項3</li><li>有序列表項4</li><li>有序列表項5</li></ol><!-- h2 樣式需求：同上面的 h2 樣式需求--><h2>表格示例</h2><!-- table 樣式需求：1. 邊框合并，無邊框間距2. 寬度為 100%--><!-- th 樣式需求：1. 背景顏色為 #f0f0f02. 字體加粗3. 文本居中對齊4. 內邊距為 8px--><!-- td 樣式需求：1. 邊框為 1px 實線的 #ccc 顏色2. 內邊距為 8px--><!-- 奇數孩子樣式需求：可使用:nth-child(even)的方式 使用背景顏色為 #f9f9f9--><table><thead><tr><th>姓名</th><th>年齡</th><th>職業</th></tr></thead><tbody><tr><td>張三</td><td>25</td><td>程序員</td></tr><tr><td>李四</td><td>30</td><td>設計師</td></tr><tr><td>王五</td><td>22</td><td>學生</td></tr></tbody></table><!-- a.info-link 樣式需求：1. 顏色為 green2. 文本有下劃線--><p>更多信息請訪問 <a href="#" class="info-link">這里</a>。</p><!-- span.secondary 樣式需求：1. 顏色為 #9992. 字體大小為 0.9em--><p><span class="secondary">這是一段次要信息</span>，需要特殊樣式。</p>
</body></html>

需實現的樣式如圖所示：
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/899606.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/899606.shtml
英文地址，請注明出處：http://en.pswp.cn/news/899606.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【彈性計算】異構計算云服務和 AI 加速器（四）：FPGA 虛擬化技術

【彈性計算】異構計算云服務和 AI 加速器（四）：FPGA 虛擬化技術

《異構計算云服務和 AI 加速器》系列&#xff0c;共包含以下文章&#xff1a; 異構計算云服務和 AI 加速器&#xff08;一&#xff09;&#xff1a;功能特點異構計算云服務和 AI 加速器&#xff08;二&#xff09;&#xff1a;適用場景異構計算云服務和 AI 加速器&#xff08;…
閱讀更多...
Java進階——位運算

Java進階——位運算

位運算直接操作二進制位&#xff0c;在處理底層數據、加密算法、圖像處理等領域具有高效性能和效率。本文將深入探討Java中的位運算。 本文目錄 一、位運算簡介1. 與運算2. 或運算異或運算取反運算左移運算右移運算無符號右移運算 二、位運算的實際應用1. 權限管理2. 交換兩個變…
閱讀更多...
OpenAI深夜直播「偷襲」谷歌！GPT-4o原生圖像生成：奧特曼帶梗圖，AGI戰場再燃戰火

OpenAI深夜直播「偷襲」谷歌！GPT-4o原生圖像生成：奧特曼帶梗圖，AGI戰場再燃戰火

引言&#xff1a;AI戰場的「閃電戰」 當谷歌剛剛發布「地表最強」Gemini 2.5 Pro時&#xff0c;OpenAI立即以一場深夜直播「閃電反擊」——GPT-4o的原生圖像生成功能正式上線&#xff01;從自拍變梗圖到相對論漫畫&#xff0c;奧特曼&#xff08;OpenAI團隊&#xff09;用一連…
閱讀更多...
鴻蒙harmonyOS：筆記 正則表達式

鴻蒙harmonyOS：筆記 正則表達式

從給出的文本中&#xff0c;按照既定的相關規則&#xff0c;匹配出符合的數據&#xff0c;其中的規則就是正則表達式&#xff0c;使用正則表達式&#xff0c;可以使得我們用簡潔的代碼就能實現一定復雜的邏輯&#xff0c;比如判斷一個郵箱賬號是否符合正常的郵箱賬號&#xff0…
閱讀更多...
[首發]烽火HG680-KD-海思MV320芯片-2+8G-安卓9.0-強刷卡刷固件包

[首發]烽火HG680-KD-海思MV320芯片-2+8G-安卓9.0-強刷卡刷固件包

烽火HG680-KD-海思MV320芯片-28G-安卓9.0-強刷卡刷固件包 U盤強刷刷機步驟&#xff1a; 1、強刷刷機&#xff0c;用一個usb2.0的8G以下U盤&#xff0c;fat32&#xff0c;2048塊單分區格式化&#xff08;強刷對&#xff35;盤非常非常挑剔&#xff0c;usb2.0的4G U盤兼容的多&a…
閱讀更多...
Python-數據處理

Python-數據處理

第十五章 生成數據 安裝Matplotlib&#xff1a;通過pip install matplotlib命令安裝庫。繪制折線圖的核心語法為&#xff1a; import matplotlib.pyplot as plt x_values [1, 2, 3] y_values [1, 4, 9] plt.plot(x_values, y_values, linewidth2) plt.title(&quo…
閱讀更多...
Java基礎-23-靜態變量與靜態方法的使用場景

Java基礎-23-靜態變量與靜態方法的使用場景

在Java中&#xff0c;static關鍵字用于定義靜態變量和靜態方法。它們屬于類本身&#xff0c;而不是類的某個實例。因此&#xff0c;靜態成員可以通過類名直接訪問&#xff0c;而無需創建對象。以下是靜態變量與靜態方法的常見使用場景&#xff1a; 一、靜態變量的使用場景 靜態…
閱讀更多...
大模型架構記錄12【Agent實例-tool】

大模型架構記錄12【Agent實例-tool】

運行根目錄下幾個ipynb文件- Learn-Agent.ipynb- 學習《Custom agent 自定義代理》部分- v1-Create-Custom-Agent.ipynb- v2-Create-Custom-Agent.ipynb- 基于v1&#xff0c;新增一些職位描述&#xff08;JD&#xff09;信息- v3-Create-Custom-Agent.ipynb- 基于v2&#xff0c…
閱讀更多...
在MCU工程中優化CPU工作效率的幾種方法

在MCU工程中優化CPU工作效率的幾種方法

在嵌入式系統開發中&#xff0c;優化 CPU 工作效率對于提升系統性能、降低功耗、提高實時性至關重要。Keil 作為主流的嵌入式開發工具&#xff0c;提供了多種優化策略&#xff0c;包括 關鍵字使用、內存管理、字節對齊、算法優化 等。本文將從多個方面介紹如何在 Keil 工程中優…
閱讀更多...
Linux系統下C語言fork函數使用案例

Linux系統下C語言fork函數使用案例

一、fork函數的作用 生成一個子進程&#xff0c;異步執行某個任務&#xff1b; 二、子進程的作用 1、子進程能復制一份父進程的變量、函數&#xff1b; 2、子進程可以和父進程同時并發執行&#xff1b; 函數語法&#xff1a; pid_t fork() 說明&#xff1a;調用后返回一個進程…
閱讀更多...
MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT

MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT

MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT CREATE TABLE LIKECREATE TABLE SELECT CREATE TABLE LIKE CREATE TABLE ... LIKE可以用來復制表結構&#xff0c;源表上的索引和約束也會復制。CREATE TABLE ... LIKE不能復制表數據。CREATE TABLE ... LIKE只能復制基表&…
閱讀更多...
Java開發者指南：深入理解HotStuff新型共識算法

Java開發者指南：深入理解HotStuff新型共識算法

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家、全棧領域優質創作者、高級開發工程師、高級信息系統項目管理師、系統架構師&#xff0c;數學與應用數學專業&#xff0c;10年以上多種混合語言開發經驗&#xff0c;從事DICOM醫學影像開發領域多年&#xff0c;熟悉DICOM協議及…
閱讀更多...
opencv圖像處理之指紋驗證

opencv圖像處理之指紋驗證

一、簡介 在當今數字化時代&#xff0c;生物識別技術作為一種安全、便捷的身份驗證方式&#xff0c;正廣泛應用于各個領域。指紋識別作為生物識別技術中的佼佼者&#xff0c;因其獨特性和穩定性&#xff0c;成為了眾多應用場景的首選。今天&#xff0c;我們就來深入探討如何利…
閱讀更多...
wfs.js之h264轉碼mp4分析

wfs.js之h264轉碼mp4分析

準備源文件 下載源文件 git clone https://github.com/ChihChengYang/wfs.js.git編譯后得到wfs.js這個文件 調用 在demo/index.html中&#xff0c;前端對wfs.js進行了調用 var video1 document.getElementById("video1"), wfs new Wfs(); wfs.attachMedia…
閱讀更多...
協程 Coroutine

協程 Coroutine

協程是 C20 引入的新特性。 文章目錄 基本概念std::coroutine_handlepromise 類型co_yield 基本用法 優勢異步 TCPco_await 基本概念 協程&#xff08;Coroutine&#xff09;是一種比線程更加輕量級的并發編程模型。協程的調度由程序員手動控制。 異步不是并行&#xff0c;但…
閱讀更多...
uniapp中的流式輸出

uniapp中的流式輸出

一、完整代碼展示 目前大多數的ai對話都是流式輸出&#xff0c;也就是對話是一個字或者多個字逐一進行顯示的下面是一個完整的流式顯示程序&#xff0c;包含的用戶的消息發出和ai的消息回復 <template><view class"chat-container"><view class&quo…
閱讀更多...
洛谷題單1-P5703 【深基2.例5】蘋果采購-python-流程圖重構

洛谷題單1-P5703 【深基2.例5】蘋果采購-python-流程圖重構

題目描述 現在需要采購一些蘋果&#xff0c;每名同學都可以分到固定數量的蘋果&#xff0c;并且已經知道了同學的數量&#xff0c;請問需要采購多少個蘋果&#xff1f; 輸入格式 輸入兩個不超過 1 0 9 10^9 109 正整數&#xff0c;分別表示每人分到的數量和同學的人數。 輸…
閱讀更多...
JS 手撕題高頻考點

JS 手撕題高頻考點

前端面試中&#xff0c;JS 手撕題是高頻考點&#xff0c;主要考察 編程能力、算法思維、JS 核心知識。以下是最常見的手撕題分類 代碼示例&#xff1a; 目錄 &#x1f4cc; 1. 手寫函數柯里化&#x1f4cc; 2. 手寫 debounce&#xff08;防抖&#xff09;&#x1f4cc; 3. 手寫…
閱讀更多...
【STM32】知識點介紹一：硬件知識

【STM32】知識點介紹一：硬件知識

文章目錄 一、電源引腳簡介二、電平信號三、電路分析 一、電源引腳簡介 VCC、GND、VDD和VSS是電子電路中常見的術語&#xff0c;代表著不同的電源引腳或電壓。 VCC&#xff08;Voltage at the Common Collector&#xff09;&#xff1a;VCC是指集電極&#xff08;Collector&am…
閱讀更多...
3. 列表元素替換

3. 列表元素替換

【問題描述】給定一個列表&#xff0c;將列表中所有的偶數替換為0 【輸入形式】輸入一行&#xff0c;包含若干個整數&#xff0c;用空格分隔 【輸出形式】輸出替換后的列表&#xff0c;每個元素用空格分隔 【樣例輸入】1 2 3 4 5 6 7 8 9 10 【樣例輸出】1 0 3 0 5 0 7 0 9…
閱讀更多...
最新文章

Copyright @ 2022~2023