搜尋
首頁web前端css教學CSS選擇器學習之聊聊複合選擇器(詳細介紹)

本篇文章給大家詳細介紹CSS中的複合選擇器,了解一下css中的交集選擇器、並集複合選擇器、層級選擇器、偽類與偽元素選擇器、屬性選擇器,一起學習吧!

CSS選擇器學習之聊聊複合選擇器(詳細介紹)

一、交集選擇器

  • 又稱標籤指定式選擇器

  • 作用:選擇同時符合兩個標籤的內容

  • 格式:1.由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器或id選擇器;2.兩個選擇器之間不能有空格

  • 例如:老師請他的班級中所有學生把頭髮染成紅色

div.student{
				color: red;
}

二、並集複合選擇器

  • ##作用:將選取的所有選擇器定義相同的樣式

  • 格式:各個選擇器透過

    逗號連接而成

  • #注意:任何選擇器都可以作為並集選擇器的一部分(有容乃大)

  • #例如:校長要求學校標語、全體老師、郭越以後寫字只能寫宋體

  • p.slogn,.teacher,#gy{
    				font-family: "宋体";
    }

三、層級選擇器

1、後代元素複合器

  • 作用:選擇某元素的子子孫孫

  • #格式:外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔

  • 例如:愚公的後代想要集體染髮

  • #yuGong .people{
       			color: red;
       		}
  • 注意:此時愚公的後代中

    所有people類別的後代都會染髮,包括愚公的兒子,孫子,曾孫子…

##2、子元素複合選擇器

    作用:選擇作為某元素子元素(親兒子)的元素
  • 格式:父級標籤寫在前面,子級標籤寫在後面,中間由> 進行連接
  • #例如:愚公的兒子們想要集體染髮
  • #yuGong>.people{
       			color: red;
    }
    注意:此時愚公的後代中所有people類的
  • 親兒子

    都會染髮,愚公的孫子,曾孫子並沒有染髮,因為年紀尚幼 這裡只會選擇子元素(親兒子)

3、接近兄弟選擇器

    #作用:選擇緊接在另一個元素後的元素,而且二者有相同的父元素
  • 格式:選擇器使用加號“ ”來連結前後兩個選擇器。選擇器中的兩個元素有
  • 同一個父親

    ,而第二個元素必須緊跟著第一個元素

  • 例如:葫蘆七兄弟裡的三娃要染髮(用二娃定位三娃)
  • #secondBaby+#thirdBaby{
       			color: red;
    }

4、普通兄弟選擇器

    作用:選擇與另一個元素同級的元素,而且二者有相同的父元素
  • 格式:使用「~」來鏈接前後兩個選擇器。選擇器中的兩個元素有
  • 同一個父親

    ,但第二個元素不必緊跟著第一個元素。

  • 例如:葫蘆七兄弟裡的三娃要染髮(用大娃定位三娃)
  • #bigBaby~#thirdBaby{
       			color: red;
    }
四、偽類別與偽元素選擇器

0、「偽」是什麼?

    「偽」是指該選擇器用來修飾不在文件樹中的部分。
  • 必讀:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

#1、偽類別選擇器

    #作用:用來當已有元素處於的某個狀態時,為其添加對應的樣式,這個狀態是根據使用者行為而動態變化的。
  • 以下只介紹上文未詳細說明的
  • 狀態偽類別

1)link

    作用:設定該元素(超連結)未存取的樣式
  • #格式:
  • ##

    a:link{...}

  • 2)visited

作用:設定此元素(超連結)已造訪的樣式
  • 格式:
  • a:visited{...}

  • 3)hover

#:設定該元素滑鼠懸停時的樣式
  • 格式:
  • a:hover{...}

  • 4)activer

作用:設定此元素活動(滑鼠按下)的樣式
  • 格式:
  • a:active{...}

  • #5)focus

作用:設定此元素取得焦點的樣式
  • 格式:
  • a:focus{...}

#:偽類的順序不要顛倒,要依照link-visited-hover-active的順序,否則可能會出錯

2、偽元素選擇器

  • 作用:用於建立一些不在文件樹中的元素,並為其新增樣式。

##::first-line選取選擇器的首行: :before在選擇器前面增加內容,使用content 屬性指定要插入的內容。 (插入的內容其實不在文件樹中):: after在選擇器後面增加內容,使用content 屬性指定要插入的內容。 (插入的內容其實不在文件樹中):: selection匹配被使用者選取或處於高亮狀態的部分
選擇器 作用
#::first-letter 選取選擇器的首字母 #p::first-letter
p::first-line
p::before{content: "hello ";}
p::after{content: "hello ";}
p::selection

五、屬性選擇器

選擇器#作用格式p[id^='yuan' ]{color: red;}p[id$='chao']{ color: blue;}
#E[att^=value] 表示E標籤的att屬性值是以'value'開頭的
E[att$=value] 表示E標籤的att屬性值是以'value'結尾的

#E[att*=value]

表示E標籤的att屬性值中包含'value'字串######p[class*='shi']{font-size: 35px;}###############更多程式相關知識,請訪問:###程式設計入門###! ! ###

以上是CSS選擇器學習之聊聊複合選擇器(詳細介紹)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:csdn。如有侵權,請聯絡admin@php.cn刪除
滑動頁腳滑動頁腳Apr 09, 2025 am 11:50 AM

剛剛推出了一個引人入勝的新網站。標語:Big Tech正在看著您。我們正在看大型技術。上升的出色工作。這

喜歡的頁面喜歡的頁面Apr 09, 2025 am 11:47 AM

前幾天,我發布了有關在JavaScript中解析RSS提要的內容。我還發布了有關RSS設置的信息,討論了Feedbin的核心。

重新創建Codepen Gutenberg嵌入塊以進行理智。重新創建Codepen Gutenberg嵌入塊以進行理智。Apr 09, 2025 am 11:43 AM

了解如何通過Chris Coyier實施WordPress的Gutenberg編輯器來創建一個自定義Codepen塊,並為Sanity Studio提供預覽。

如何使用CSS製作線路圖如何使用CSS製作線路圖Apr 09, 2025 am 11:36 AM

線,條和餅圖是儀表板的麵包和黃油,是任何數據可視化工具包的基本組成部分。當然,您可以使用SVG

編程SASS創建可訪問的顏色組合編程SASS創建可訪問的顏色組合Apr 09, 2025 am 11:30 AM

我們一直在尋求使網絡更容易訪問。顏色對比只是數學,因此Sass可以幫助涵蓋設計師可能錯過的邊緣案例。

我們如何創建一個在SVG中生成格子呢模式的靜態站點我們如何創建一個在SVG中生成格子呢模式的靜態站點Apr 09, 2025 am 11:29 AM

格子呢是一塊圖案布,通常與蘇格蘭有關,尤其是他們時尚的蘇格蘭語。在Tar​​tanify.com上,我們收集了5,000多個格子呢

PHP模板的後續行動PHP模板的後續行動Apr 09, 2025 am 11:14 AM

不久前,我僅以PHP(基本上是Heredoc語法)發布了有關PHP模板的信息。我從字面上使用該技術來進行某種超級基礎

使用Bootstrap組件創建模態圖像庫使用Bootstrap組件創建模態圖像庫Apr 09, 2025 am 11:10 AM

您是否曾經在網頁上單擊圖像,該圖像通過導航打開圖像的較大版本以查看其他照片?

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境