當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5新增的几种选择器详解

發(fā)布時(shí)間：2023/12/20 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5新增的几种选择器详解小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

1.基本選擇器
- 1.1 子元素選擇器
- 1.2 相鄰兄弟元素選擇器
- 1.3 通用兄弟選擇器
- 1.4 群組選擇器
2.屬性選擇器
2.1 選擇帶有某種屬性的元素
- 2.2 選擇屬性等于某個(gè)特定值的元素
- 2.3 選擇屬性中包含特定單詞的元素
- 2.4 選擇屬性以特定字符串開頭的所有元素
- 2.5 選擇屬性以特定字符串結(jié)尾的所有元素
- 2.6 選擇屬性包含特定字符串的所有元素
- 2.7 選擇屬性為特定值或以該特定值開頭的所有元素
3.偽類選擇器
- 3.1 動(dòng)態(tài)偽類
- 3.2 UI元素狀態(tài)偽類
- 3.3 CSS3結(jié)構(gòu)類
- - first-child
  - last-child
  - nth-child(n)
  - nth-last-child(n)
  - nth-of-type(n)
  - nth-last-of-type(n)
  - first-of-type
  - last-of-type
  - only-child
  - only-of-type
  - empty
- 3.4 否定選擇器
4.偽元素
- 4.1 first-line
- 4.2 first-letter
- 4.3 before
- 4.4 after
- 4.5 selection

1.基本選擇器

1.1 子元素選擇器

只能選擇某元素的子元素

父元素>子元素

1.2 相鄰兄弟元素選擇器

選擇緊接在另一元素后的元素，而且他們具有相同的父元素

元素+兄弟相鄰元素 <!DOCTYPE html> <html> <head><title>練習(xí)網(wǎng)頁</title><style type="text/css">.main > div{background-color: red;}.main > .one + div{background-color: blue;}</style> </head> <body><div class='main'><div class='one'>1</div><div class='two'>2</div><div class='three'>3</div></div> </body> </html>

1.3 通用兄弟選擇器

選擇某元素后面的所有兄弟元素，而且他們具有一個(gè)相同的父元素

元素~后面所有兄弟相鄰元素 <style type="text/css">.main > div{background-color: red;}.main > .one ~ div{background-color: blue;}</style>

1.4 群組選擇器

將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)隔開

<!DOCTYPE html> <html> <head><title>練習(xí)網(wǎng)頁</title><style type="text/css">h1,div{background-color: blue;}</style> </head> <body><div class='one'>1</div><div class='two'>2</div><div class='three'>3</div><span>4</span><h1>5</h1> </body> </html>

2.屬性選擇器

2.1 選擇帶有某種屬性的元素

div[class]{background-color: lightblue; }

2.2 選擇屬性等于某個(gè)特定值的元素

div[class='one']{background-color: lightblue; }

2.3 選擇屬性中包含特定單詞的元素

注意：是包含某個(gè)單詞，而不是字符串中包含某個(gè)子字符串
例如 div[class~='t'] 選擇的是class屬性中含有t這個(gè)單詞的，例如class='t',class='t three'，匹配不到類似于class='three' ,class='two'這類在字符串中包含的。

<!DOCTYPE html> <html> <head><title>練習(xí)網(wǎng)頁</title><style type="text/css">div[class~='t']{background-color: lightblue;}</style> </head> <body><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div><span>4</span><h1>5</h1><div>6</div> </body> </html>

2.4 選擇屬性以特定字符串開頭的所有元素

div[class^='t']{background-color: lightblue; }

2.5 選擇屬性以特定字符串結(jié)尾的所有元素

div[class$='t']{background-color: lightblue; }

2.6 選擇屬性包含特定字符串的所有元素

div[class*='t']{background-color: lightblue;}

2.7 選擇屬性為特定值或以該特定值開頭的所有元素

div[class|='t']{background-color: lightblue; }

3.偽類選擇器

3.1 動(dòng)態(tài)偽類

這些偽類并不存在于HTML中，只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來。
錨點(diǎn)偽類：:link :visited
用戶行為偽類: :hover :active :focus

<!DOCTYPE html> <html> <head><title>練習(xí)網(wǎng)頁</title><style type="text/css">div[class*='t']{background-color: lightblue;}.main :hover {background-color: pink;};</style> </head> <body><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div><span>4</span><h1>5</h1><div>6</div></div> </body> </html>

紅色箭頭代表鼠標(biāo)停留位置

3.2 UI元素狀態(tài)偽類

:enabled :disabled :checked

3.3 CSS3結(jié)構(gòu)類

first-child

element:first-child

選擇其父元素的首個(gè)子元素的每個(gè)element元素

<body><div>0</div><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div></div> </body> div:first-child{background-color: pink;}

只要是屬于父元素的第一個(gè)div，都會(huì)匹配

last-child

div:last-child{background-color: pink;} <body><div>0</div><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div></div><div>4</div> </body>

nth-child(n)

匹配屬于其父元素的第n個(gè)子元素，不論元素類型

nth-child(odd) 匹配奇數(shù)
nth-child(even)匹配偶數(shù)

nth-last-child(n)

與4.3類似

nth-of-type(n)

匹配屬于父元素的特定類型的第n個(gè)子元素的每個(gè)元素

nth-last-of-type(n)

與4.5類似

first-of-type

last-of-type

only-child

匹配屬于其父元素的唯一子元素的每個(gè)元素
意思就是：僅匹配獨(dú)生子，不能有兄弟元素

only-of-type

匹配屬于其父元素的特定類型的唯一子元素的每個(gè)元素
意思就是：僅匹配獨(dú)生子，但可以有兄弟元素，只要兄弟元素不與他是同一類型即可匹配

empty

匹配沒有子元素（包括文本節(jié)點(diǎn)）的每個(gè)元素

3.4 否定選擇器

:not(element/selector)選擇器匹配非指定元素/選擇器的每個(gè)元素

父元素:not(子元素/子選擇器）

例如：a:not(:last-of-type){...}

4.偽元素

偽元素用于向某些選擇器設(shè)置特殊效果

4.1 first-line

element::first-line 對(duì)element元素中的第一行文本進(jìn)行格式化

4.2 first-letter

element::first-letter 對(duì)element元素中的第一個(gè)字符進(jìn)行格式化

4.3 before

element::before 對(duì)element元素前面插入新內(nèi)容，常與content配合使用

4.4 after

與4.3類似

4.5 selection

用于設(shè)置在瀏覽器中選中文本后的背景色與前景色

總結(jié)

以上是生活随笔為你收集整理的HTML5新增的几种选择器详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。