CSS 【詳解】樣式選擇器（含ID、類、標簽、通配、屬性、偽類、偽元素、Content屬性、子代、后代、兄弟、相鄰兄弟、交集、并集等選擇器）

CSS 樣式選擇器，用于選中頁面中的 html 元素，以便添加 CSS 樣式。

按渲染性能由高到低 依次是：

ID 選擇器 #id

通過元素的 id 屬性選中元素，區分大小寫

<p id="p1" >第一段</p>

#p1{color: red;
}

但不推薦使用，因為：

  • id 選擇器的優先級較高，不方便重置樣式
  • id 選擇器主要給 JS 使用

類選擇器 .class

通過元素的 class 屬性中的樣式類名選中元素，區分大小寫

最推薦使用的 CSS 選擇器，因為類選擇器語義化強，且方便重置樣式。

<span class="important" >重點詞匯</span>

.important{color: red;font-weight: bold;
}

同一個元素，可以添加多個樣式類，用空格隔開

<span class="important big" >巨大的重點詞匯</span>

.important {color: red;font-weight: bold;
}
.big {font-size: 60px;
}

標簽選擇器 標簽名

通過元素的標簽名選中元素，不區分大小寫

<a href="https://www.baidu.com/" target="_blank" >百度</a>

a {text-decoration: none; /* 無文本裝飾（消除默認的下劃線） */
}

不推薦使用，因為標簽選擇器性能不佳，維護成本高

通配選擇器 *

選中頁面中除偽元素外的所有 html 元素，常用于清除瀏覽器的默認樣式，但不推薦使用，因為消耗性能。

/* 清除所有html標簽默認的外邊距和內邊距 */
* {margin: 0;padding: 0;
}

屬性選擇器 [屬性]

根據元素的屬性和屬性值來選中元素，屬性不區分大小寫，屬性值區分大小寫

屬性選擇器描述
[attribute]用于選取帶有指定屬性的元素。
[attribute=value]用于選取帶有指定屬性和值的元素。
[attribute~=value]用于選取屬性值中包含指定詞匯的元素，非常適合包含多種組合屬性值的場景
[attribute|=value]屬性值起始片段選擇器，該值必須是整個單詞。
[attribute^=value]匹配屬性值以指定值開頭的每個元素。
[attribute$=value]匹配屬性值以指定值結尾的每個元素。
[attribute*=value]匹配屬性值中包含指定值的每個元素。

偽類選擇器 :狀態名

根據元素的不同狀態來選中元素

同一個標簽，不同的狀態，有不同的樣式，就叫做“偽類”
偽類選擇器例子例子描述
:activea:active選擇活動的鏈接。（鼠標點擊標簽，但是不松手時）
:checkedinput:checked選擇每個被選中的<input> 元素。
:disabledinput:disabled選擇每個被禁用的 <input> 元素。
:emptyp:empty選擇沒有子元素的每個 <p> 元素。
:enabledinput:enabled選擇每個已啟用的 <input> 元素。
:first-childp:first-child選擇作為其父的首個子元素的每個 <p> 元素。
:first-of-typep:first-of-type選擇作為其父的首個 <p> 元素的每個 <p> 元素。
:focusinput:focus選擇獲得焦點的 <input> 元素。
:hovera:hover選擇鼠標懸停其上的鏈接。
:in-rangeinput:in-range選擇具有指定范圍內的值的 <input> 元素。
:invalidinput:invalid選擇所有具有無效值的 <input> 元素。
:lang(language)p:lang(it)選擇每個 lang 屬性值以 “it” 開頭的 <p> 元素。
:last-childp:last-child選擇作為其父的最后一個子元素的每個 <p> 元素。
:last-of-typep:last-of-type選擇作為其父的最后一個 <p> 元素的每個 <p> 元素。
:linka:link選擇所有未被訪問的鏈接。
:not(selector):not§選擇每個非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)選擇作為其父的第二個子元素的每個 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)選擇作為父的第二個子元素的每個<p>元素，從最后一個子元素計數。
:nth-last-of-type(n)p:nth-last-of-type(2)選擇作為父的第二個<p>元素的每個<p>元素，從最后一個子元素計數
:nth-of-type(n)p:nth-of-type(2)選擇作為其父的第二個 <p> 元素的每個 <p> 元素。
:only-of-typep:only-of-type選擇作為其父的唯一 <p> 元素的每個 <p> 元素。
:only-childp:only-child選擇作為其父的唯一子元素的 <p> 元素。
:optionalinput:optional選擇不帶 “required” 屬性的 <input> 元素。
:out-of-rangeinput:out-of-range選擇值在指定范圍之外的 <input> 元素。
:read-onlyinput:read-only選擇指定了 “readonly” 屬性的 <input> 元素。
:read-writeinput:read-write選擇不帶 “readonly” 屬性的 <input> 元素。
:requiredinput:required選擇指定了 “required” 屬性的 <input> 元素。
:rootroot選擇元素的根元素。
:target#news:target選擇當前活動的 #news 元素（單擊包含該錨名稱的 URL）。
:validinput:valid選擇所有具有有效值的 <input> 元素。
:visiteda:visited選擇所有已訪問的鏈接。

列表中使用偽類選擇器

偽類選擇器含義
li:nth-child(2)第2個 li
li:nth-child(n)所有的li
li:nth-child(2n)所有的第偶數個 li
li:nth-child(2n+1)所有的第奇數個 li
li:nth-child(-n+5)前5個 li
li:nth-last-child(-n+5)最后5個 li
li:nth-child(7n)選中7的倍數

n 表示 0,1,2,3,4,5,6,7,8…（當n小于1時無效，因為n = 0 也是不會選中的）

表格中使用偽類選擇器

  • tr:nth-child(odd)：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
  • tr:nth-child(even)：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。

  • 偽類選擇器的實戰范例

    • 使用 :nth-child() 實現斑馬條紋、對齊邊緣、指定區間列表高亮、動態列表自適應布局
      https://blog.csdn.net/weixin_41192489/article/details/122089484

    • CSS 實現動態顯示隱藏（:checked 和 :target 的妙用）
      https://blog.csdn.net/weixin_41192489/article/details/126267866

    • 使用 :target 實現展開更多、收起、Tab選項卡切換https://blog.csdn.net/weixin_41192489/article/details/121969768

    • 使用 :placeholder-shown 實現MaterialDesign風格的交互
      https://blog.csdn.net/weixin_41192489/article/details/121976627

    • 使用 :placeholder-shown校驗空值、提示不能為空
      https://blog.csdn.net/weixin_41192489/article/details/121977510

    • :checked 實現展開收起
      https://demo.cssworld.cn/selector/9/2-1.php

    • :checked 實現選項卡切換
      https://demo.cssworld.cn/selector/9/2-2.php

    • :checked實現自定義單選框、復選框、開關、標簽復選、素材單選
      https://blog.csdn.net/weixin_41192489/article/details/122050069

    • 使用 :valid 和 :invalid 實現原生表單校驗
      https://blog.csdn.net/weixin_41192489/article/details/122070084

    • 使用:required和:optional實現表單校驗提示文字
      https://blog.csdn.net/weixin_41192489/article/details/122072879

    • :focus-within 實現下拉列表
      https://blog.csdn.net/weixin_41192489/article/details/121959850

    • 輸入框聚焦時，高亮前方的標簽（見鏈接內的方法5）
      https://blog.csdn.net/weixin_41192489/article/details/121784196

    • 鼠標懸浮顯示放大圖片 vs 鼠標點擊顯示放大圖片
      https://blog.csdn.net/weixin_41192489/article/details/121944791

    • :empty 隱藏空元素、缺失字段智能提示
      https://blog.csdn.net/weixin_41192489/article/details/122086159

    • :only-child 實現多狀態的動態加載動畫
      https://blog.csdn.net/weixin_41192489/article/details/122088416

    • :fullscreen 實現點擊圖片全屏顯示
      https://blog.csdn.net/weixin_41192489/article/details/122328725

    偽元素選擇器 ::

    用于選擇和樣式化元素的一部分，而非整個元素

    CSS2中偽元素采用單冒號前綴語法， CSS2.1中偽元素改用雙冒號前綴，所有支持雙冒號的瀏覽器同樣也支持舊的單冒號語法。考慮瀏覽器兼容性的話，推薦使用舊的單冒號語法，否則建議使用新的雙冒號前綴

    ::before 和 ::after

    需配合content屬性一起使用，用于在元素前面和后面設置內容，詳見
    https://blog.csdn.net/weixin_41192489/article/details/115100040

    常用的實戰范例：

    • 元素前后添加圖標（::before 和 ::after 的妙用）
      https://blog.csdn.net/weixin_41192489/article/details/134858462
    • css 巧用 ::after 和 ::before 實現豎排分類導航
      https://blog.csdn.net/weixin_41192489/article/details/134885007
    • css 巧用 ::after 實現 tab 切換動效
      https://blog.csdn.net/weixin_41192489/article/details/134881852

    ::first-letter 首字母

    <p>很久很久以前</p>
<p>Long long ago</p>

    p::first-letter {font-size: 2em;color: red;
}

    在這里插入圖片描述

    ::first-line 第一行

      <div style="width: 120px"><p>很久很久以前，有一個白發蒼蒼的老人</p></div>

    p::first-line {color: red;
}

    在這里插入圖片描述

    ::selection 鼠標拖拽選中的區域

    <p>很久很久以前，有一個白發蒼蒼的老人</p>

    p::selection {color: red;background-color: yellow;
}

    在這里插入圖片描述

    ::placeholder 文字占位符

    <input placeholder="請輸入" />

    /* input 不寫，則會選中頁面所有元素的占位符 */
input::placeholder {color: red;
}

    在這里插入圖片描述

    關系選擇器

    通過元素間的關系選中元素

    子代選擇器 >

    標簽內包裹的第一層標簽是它的子代

    <div><p>我是div的兒子</p>
</div>

    div>p{color:red;
}

    后代選擇器 空格

    標簽內的所有標簽都是它的后代

      <div class="parent"><p class="red">我是子代（屬于后代）</p><p>我是子代（屬于后代，但沒有 .red）</p><div><div class="red">我是孫代（也屬于后代）</div></div></div>

    /* 所有屬于.parent元素內部的.red元素都將被染成紅色。*/
.parent .red {color: red;
}

    在這里插入圖片描述

    兄弟選擇器 ~

    選中同一個父元素下，在指定元素之后的所有同級元素，所以嚴格講，應該叫 后面兄弟選擇器

    <div><button>按鈕1(不會變紅)</button><p>段落</p><button>按鈕2（會變紅）</button>
</div>

    p ~ button {color: red;
}

    在這里插入圖片描述

    CSS 沒有 前面兄弟選擇器 ，可以參考下方鏈接模擬實現
    https://blog.csdn.net/weixin_41192489/article/details/121784196

    相鄰兄弟選擇器 +

    選中緊跟在一個元素之后的下一個元素

      <div class="parent"><p>段落</p><button>按鈕1</button><button>按鈕2</button></div>

    p + button {color: red;
}

    在這里插入圖片描述

    交集選擇器

    選中頁面中同時符合多個選擇器的元素

    • 選擇器之間沒有空格（有空格就是后代選擇器）
    • 如果存在標簽選擇器，標簽選擇器必須放在前面
        <p class="red">很久很久以前1</p><p>很久很久以前2</p>

    /* 選中 p 標簽中class值含 red 的元素 */
p.red {color: red;
}

    在這里插入圖片描述

    并集選擇器 ,

    多個選擇器中，只要滿足其中一個，就會被選中

    • 多個選擇器之間用 , 隔開
     <p class="error">報錯信息</p><p class="important">重要信息</p><p>其他信息</p>

    .error,
.important {color: red;
}

    在這里插入圖片描述

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

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

相關文章

【LinuxC語言】手撕Http之處理POST請求

【LinuxC語言】手撕Http之處理POST請求

文章目錄 前言聲明POST的組成讀取POST信息讀取消息體長度讀取消息體解析消息體How to use?總結前言 在互聯網的世界中，HTTP協議無疑是最重要的協議之一。它是Web的基礎，支持著我們日常生活中的大部分在線活動。盡管有許多現成的庫可以處理HTTP請求，但了解其底層工作原理是…
閱讀更多...
全面解析：兒童編程等級考試及其區別

全面解析：兒童編程等級考試及其區別

目錄 1. 前言2. 兒童編程等級考試的重要性3. 兒童編程等級考試的特點4. 兒童編程等級考試4.1 非專業級軟件能力認證（CSP-J/S）4.2 GESP編程能力等級認證4.3 青少年編程能力等級測試（CPA）4.4 全國青少年軟件編程等級考試4.5 全國青少年編程能力等級考試（PAAT)1. 前言 近年來…
閱讀更多...
【學習筆記】Mybatis-Plus（四）：MP中內置的插件

【學習筆記】Mybatis-Plus（四）：MP中內置的插件

內置插件 目前MP已經存在的內部插件包括如下&#xff1a; 插件類名作用PaginationInnerInterceptor分頁插件。可以代替以前的PageHelperOptimisticLockerInnerInterceptor樂觀鎖插件。用于冪等性操作&#xff0c;采用版本更新記錄DynamicTableNameInnerInterceptor動態表名Te…
閱讀更多...
【Rust】Cargo介紹

【Rust】Cargo介紹

一、Cargo簡介 Cargo 是Rust語言的包管理工具&#xff0c;它幫助我們管理我們項目的依賴。做js開發的同學應該了解nodejs的包管理工具npm&#xff0c;Cargo和npm做的事情是一樣的。C和C的同學可能對這個就比較陌生了&#xff0c;C/C語言沒有統一的依賴管理工具&#xff0c;各個…
閱讀更多...
Spring中常見知識點及使用

Spring中常見知識點及使用

Spring Framework 是 Java 生態系統中最流行的開源框架之一&#xff0c;它提供了一系列強大的功能&#xff0c;用于構建企業級應用。以下是一些常見的 Spring 知識點及其使用方法&#xff1a; 1. 依賴注入&#xff08;Dependency Injection&#xff09; 依賴注入是 Spring 的…
閱讀更多...
【SpringCloud應用框架】Nacos集群架構說明

【SpringCloud應用框架】Nacos集群架構說明

第六章 Spring Cloud Alibaba Nacos之集群架構說明 文章目錄 前言一、Nacos支持三種部署模式二、集群部署說明三、預備環境 前言 到目前為止&#xff0c;已經完成了對Nacos的一些基本使用和配置&#xff0c;接下來還需要了解一個非常重要的點&#xff0c;就是Nacos的集群相關的…
閱讀更多...
【芯片制造】【問題整理】明場檢測和暗場檢測

【芯片制造】【問題整理】明場檢測和暗場檢測

背景&#xff1a; 什么是明場檢測和暗場檢測 主要功能&#xff1a; 1、在明場檢測中&#xff0c;光源直接照射到樣品表面&#xff0c;透射光或反射光被收集并成像。樣品上的顆粒、劃痕、凹坑會改變光的反射和透射&#xff0c;形成對比&#xff0c;能夠快速掃描大面積樣品。 2、…
閱讀更多...
SAP - 初識

SAP - 初識

人過三十不學藝&#xff1b;活到老學到老。。。。。。 怎么說都有理&#xff0c;說不如做 低頭做事&#xff0c;抬頭看天 先做&#xff0c;至少了解下是個什么&#xff1f; 1. SAP是什么 https://www.sap.cn/ -- 思愛普中國 https://www.sap.cn/about/wha…
閱讀更多...
金斗云 HKMP智慧商業軟件 任意用戶創建漏洞復現

金斗云 HKMP智慧商業軟件 任意用戶創建漏洞復現

0x01 產品簡介 金斗云智慧商業軟件是一款功能強大、易于使用的智慧管理系統，通過智能化的管理工具，幫助企業實現高效經營、優化流程、降低成本，并提升客戶體驗。無論是珠寶門店、4S店還是其他零售、服務行業，金斗云都能提供量身定制的解決方案，助力企業實現數字化轉型和智…
閱讀更多...
無人機遙控器指令加密方法

無人機遙控器指令加密方法

遙控信息的安全問題是無人機遙控系統設計和任務實施過程中最重要的問題之一。然而日益發展的電子偵察和電子對抗技術&#xff0c;使第三方可以截獲已方所發送的遙控指令&#xff0c;分析和竊取遙控信息的內容&#xff0c;從而偽造遙控信息&#xff0c;對己方無人機構成嚴重威脅…
閱讀更多...
12.x86游戲實戰-匯編指令and or not

12.x86游戲實戰-匯編指令and or not

免責聲明&#xff1a;內容僅供學習參考&#xff0c;請合法利用知識&#xff0c;禁止進行違法犯罪活動&#xff01; 本次游戲沒法給 內容參考于&#xff1a;微塵網絡安全 上一個內容&#xff1a;11.x86游戲實戰-匯編指令add sub inc dec and指令是與的意思 or指令是或的意思 …
閱讀更多...
MUX VLAN實現二層流量的彈性管控

MUX VLAN實現二層流量的彈性管控

一、模擬場景&#xff0c;企業有一臺服務器&#xff0c;部門A&#xff0c;部門B&#xff0c;訪客 二、要求&#xff1a;三者都可以訪問服務器&#xff0c;部門A和B可以進行部門內部通信&#xff0c;A和B不可以通信&#xff0c;訪客只能訪問服務器 三、拓撲如下圖 四、配置流程…
閱讀更多...
計算機網絡編程和并發的知識

計算機網絡編程和并發的知識

OSI七層協議 OSI&#xff08;Open Systems Interconnection&#xff09;模型是一個七層的網絡通信模型&#xff0c;用于標準化不同層級的網絡通信。從下到上分別是&#xff1a; 物理層&#xff08;Physical Layer&#xff09;&#xff1a;負責在物理媒介上傳輸原始的比特流。…
閱讀更多...
springcloud 面試經常被問問題

springcloud 面試經常被問問題

Spring Cloud 是一個基于 Spring Boot 的微服務架構解決方案&#xff0c;包含了許多用于構建和管理微服務的工具和框架。在面試中&#xff0c;與 Spring Cloud 相關的問題通常會涉及其核心概念、組件、常用模式和解決方案。以下是一些在 Spring Cloud 面試中經常被問到的問題及…
閱讀更多...
Linux系統(Centos)下MySQL數據庫中文亂碼問題解決

Linux系統(Centos)下MySQL數據庫中文亂碼問題解決

問題描述&#xff1a;在進行數據庫使用過程中&#xff0c;數據庫里的數據中文都顯示亂碼。操作數據庫的時候&#xff0c;會出現中文亂碼問題。 解決方法如下&#xff1a; 第一步&#xff1a;打開虛擬機進入系統&#xff0c;啟動MySQL。 第二步&#xff1a;連接登錄MySQL輸入…
閱讀更多...
Java面試題系列 - 第4天

Java面試題系列 - 第4天

題目&#xff1a;深入理解Java泛型與類型擦除 背景說明&#xff1a;Java泛型是Java SE 5引入的一種新特性&#xff0c;它允許在編譯時檢查類型安全&#xff0c;并且所有的強制轉換都是自動和隱式的&#xff0c;提高了代碼的重用率。然而&#xff0c;Java泛型的實現背后有一個重…
閱讀更多...
執行力不足是因為選擇模糊

執行力不足是因為選擇模糊

選擇模糊&#xff1a;執行力不足的根源 選擇模糊是指在面對多個選項時&#xff0c;缺乏明確的目標和方向。這種模糊感會導致猶豫不決&#xff0c;進而影響我們的執行力。 選擇模糊的表現&#xff1a; 目標不明確&#xff0c;不知道應該做什么。優先級混亂&#xff0c;不清楚…
閱讀更多...
Docker-12 Docker常用命令

Docker-12 Docker常用命令

一、查看docker版本信息 docker version # 查看Docker版本信息二、啟動/停止docker 服務 systemctl start docker # 啟動 docker 服務 systemctl stop docker # 停止 docker 服務三、鏡像命令 docker images # 查看鏡像 docker search 鏡像名稱 # 搜索鏡像…
閱讀更多...
分布式技術棧、微服務架構 區分

分布式技術棧、微服務架構 區分

1.分布式技術棧 這些技術棧都是為了更好的開發分布式架構的項目。 &#xff08;大營銷平臺的系統框架如下圖&#xff0c;擴展的分布式技術棧&#xff09; &#xff08;1&#xff09;Dubbo——分布式技術棧 DubboNacos注冊中心是應用可以分布式部署&#xff0c;并且提供RPC接…
閱讀更多...
BOM和DOM

BOM和DOM

關于DOM、BOM和diff算法 瀏覽器對象模型&#xff08;Browser Object Model&#xff0c;簡稱BOM&#xff09;和文檔對象模型&#xff08;Document Object Model&#xff0c;簡稱DOM&#xff09;是Web開發中的兩個核心概念&#xff0c;它們都與瀏覽器和網頁的交互有關。以下是BOM…
閱讀更多...
最新文章

Copyright @ 2022~2023