CSS選擇器之基礎選擇器和複合選擇器

来源:https://www.cnblogs.com/detailNew/archive/2023/03/29/17269109.html
-Advertisement-
Play Games

本博文介紹CSS中的基礎選擇器和複合選擇器。基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器,複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 ...


本博文介紹CSS中的基礎選擇器和複合選擇器。

基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器,複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 

1 基礎選擇器

基礎選擇器由單個選擇器組成,包括:標簽選擇器、類選擇器、id選擇器和通配符選擇器。

1.1 標簽選擇器

標簽選擇器通過單個元素標簽(如p、div、h1)選擇對應的元素,使用標簽選擇器會選擇到所有的對應標簽。

使用格式:

標簽名{
    屬性1: 屬性值1;
    屬性2: 屬性值2;
}

使用實例:

div{
    height: 100px;
    width: 100px;
}

實例作用:將所有的 div 元素的高(height)和寬(width)設置為100px

1.2 類選擇器

類選擇器通過元素的類名(class)對元素進行選擇,可以選擇到一個或者多個元素標簽,該選擇器在開發中最常用。

使用格式:

.類名{
    屬性1: 屬性值1;
    屬性2: 屬性值2;    
}

使用實例:

.red-box{
    color: red;
}

實例作用:將類名為"red-box"的元素中的字體顏色(color)設置為紅色(red)

1.3 id選擇器

id 選擇器通過元素的 id 對元素進行選擇,該選擇器只能選擇到一個元素標簽(因為元素的 id 是唯一的),id 選擇器經常和 js 搭配使用。

使用格式:

#id值{
    屬性1: 屬性值1;
    屬性2: 屬性值2;
}

使用實例:

#content_left{
    text-align: left;
}

實例作用:將 id 為"content_left"的元素中的文字內容設置左對齊(text-align: left;)

1.4 通配符選擇器

通配符選擇器可以選擇頁面中的所有元素,在去除掉頁面中的預設樣式時有很好的作用。

使用格式:

*{
    屬性1: 屬性值1;
    屬性2: 屬性值2;
}

使用實例:

*{
    margin: 0;
    padding: 0;
}

實例作用:將頁面中所有元素的外邊距(margin)和內邊距(padding)都設置為0(此實例使用頻率很高)

2 複合選擇器

複合選擇器由多個基礎選擇器組成,常用的包括:後代選擇器、子選擇器、並集選擇器和偽類選擇器。

2.1 後代選擇器

後代選擇器可以選擇某個元素的所有後代元素(包括兒子元素、孫子元素等)。

使用格式:

元素1 元素2 元素3{
    樣式
}

註意:

(1)元素和元素之間用空格隔開;

(2)元素1、元素2、元素3...為基礎選擇器(標簽選擇器、類選擇器、id選擇器等)。

使用實例:

div p{
    color: red;
}

實例作用:將所有 div 元素的所有子元素 p 中的字體顏色(color)設置為紅色(red)

2.2 子選擇器

子選擇器可以選擇某個元素的最近一級子元素(只包括兒子元素,不包括孫子元素等)。

使用格式:

元素1 > 元素2{
    樣式
}

註意:

(1)元素和元素之間用 > 隔開;

(2)元素1、元素2...為基礎選擇器(標簽選擇器、類選擇器、id選擇器等)。

使用實例:

div > p{
    color: red;
}

實例作用:將所有 div 元素的所有兒子元素 p 中的字體顏色(color)設置為紅色(red)

2.3 並集選擇器

並集選擇器可以選擇多組元素並設置相同的樣式。

使用格式:

元素1, 元素2{
    樣式
}

註意:

(1)元素和元素之間用 , 隔開;

(2)元素1、元素2...為基礎選擇器(標簽選擇器、類選擇器、id選擇器等)。

使用實例:

.left-box, .right-box{
    color: red;
}

實例作用:將所有類名為"left-box"和"right-box"的元素中的字體顏色(color)設置為紅色(red)

2.4 偽類選擇器

偽類選擇器用於向某些選擇器添加特殊的效果,這裡介紹鏈接偽類選擇器和 focus偽類選擇器。

使用格式:在選擇器後用冒號表示,如 :hover、:active等。

  • 鏈接偽類選擇器

        鏈接偽類選擇器通過將元素選擇器(a 元素)和偽類選擇器複合,起到不同的效果,具體可以分為以下四種。

鏈接偽類選擇器 選擇元素
a:link 選擇到所有未被訪問的 a 元素
a:visited 選擇到所有已被訪問的 a 元素
a:hover 選擇到滑鼠指針位於其上的 a 元素
a:active 選擇活動鏈接(滑鼠按下未彈起的 a 元素)

        註意:為了確保鏈接偽類選擇器生效,需按照link、visited、hover、active的順序來寫。

        使用實例:

a:hover{
    color: red;
}

        實例作用:當滑鼠移到 a 元素上時,鏈接的文字顏色(color)變為紅色(red)

  • focus偽類選擇器(:focus)

        focus偽類選擇器可以選取獲得焦點(游標)的表單元素。

        使用格式:

input:focus{
    樣式
}

        使用實例:

input:focus{
    background-color: skyblue;
}

        實例作用:當游標聚焦在 input 元素上時,input 元素的背景顏色(background-color)變為天藍色(skyblue)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis資料庫 Redis(Remote Dictionary Server)是一個使用 C 語言編寫的,高性能非關係型的鍵值對資料庫。與傳統資料庫不同的是,Redis 的數據是存在記憶體中的,所以讀寫速度非常快,被廣泛應用於緩存方向。Redis可以將數據寫入磁碟中,保證了數據的安全不丟失,而且Re ...
  • RMAN備份時會記錄每一次備份的狀態信息,例如COMPLETED,FAILED等,但是使用下麵腳本查詢資料庫時,偶爾你會看到有些備份的狀態為COMPLETED WITH WARNINGS SET LINESIZE 1080;COL STATUS FORMAT A9;COL START_TIME FO ...
  • 摘要:智能把控大數據量查詢,防患系統奔潰於未然。 本文分享自華為雲社區《拒絕“爆雷”!GaussDB(for MySQL)新上線了這個功能》,作者:GaussDB 資料庫。 什麼是最大讀取行 一直以來,大數據量查詢是資料庫DBA們調優的重點,DBA們通常十八般武藝輪番上陣以期提升大數據查詢的性能:例 ...
  • 從MySQL 5.5版本開始預設 使用InnoDB作為引擎,它擅長處理事務,具有自動崩潰恢復的特性,在日常開發中使用非常廣泛 下麵是官方的InnoDB引擎架構圖,主要分為記憶體結構和磁碟結構兩大部分。 InnoDB 記憶體結構 1. Buffer Pool Buffer Pool:緩衝池,簡稱BP。其作 ...
  • 日常生產中 HDFS 上小文件產生是一個很正常的事情,同時小文件也是 Hadoop 集群運維中的常見挑戰,尤其對於大規模運行的集群來說可謂至關重要。 數據地圖是離線開發產品的基本使用單位,包含全部表和項目的相關信息,可以對錶做相關的許可權管理和脫敏管理操作,以及可以展示對應項目占用情況和其表的占用情況 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 奧特曼愛小怪獸 文章來源:GreatSQL社區原創 前言 線上,遇到一些sql性能問題,需要手術刀級別的調優。optimizer_trace是一 ...
  • 華為HMS Core運動健康服務支持通過REST API,以GPX文件格式寫入用戶路線數據,支持導入軌跡(Track)或路程(Route)類型的數據,實現用戶路線數據在華為運動健康App中的展示效果。 假若與華為運動健康App相連接的穿戴設備支持路線導入,那麼用戶路線數據將自動下發至穿戴設備。用戶可 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 假設,我們有這樣一張 Gif 圖: 利用 CSS,我們嘗試來搞一些事情。 圖片的 Glitch Art 風 在這篇文章中 --CSS 故障藝術,我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。 像是這樣: 假 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...