如何使用屬性選擇器
屬性選擇器介紹
- 屬性選擇器能夠根據元素的屬性及屬性值來選擇元素。
- 屬性選擇器有什麼好處呢，如：能夠經過標籤的屬性名和屬性值來匹配對應的元素。
attr是英文單詞attribute的簡寫，中文意思就是屬性或屬性名。val是英文單詞value的簡寫，中文意思就是值或屬性值。- 屬性選擇器必須使用
[]中括號。
屬性選擇器說明表
| 屬性名 | 描述 | 舉例 |
|---|---|---|
| [attr] | 匹配指定的屬性名的全部元素。 | [align]{color: red;} |
| [attr=val] | 匹配屬性等於指定的值全部元素。 | [align=center]{color: red;} |
| [attr^=val] | 匹配屬性以指定的屬性值開頭的全部元素 | [color^="#f"]{color :mediumblue;} |
| [attr$ =val] | 匹配屬性以指定的屬性值結尾的全部元素 | [color$="aa"]{color :mediumblue;} |
| [attr*=val] | 匹配屬性中包含指定的屬性值全部元素 | [color*="aa"]{color :mediumblue; } |
屬性名爲[attr]使用方式
- 讓咱們進入屬性名爲
[attr]實踐，實踐內容如：將HTML頁面中的屬性名爲align元素文本顏色設置爲紅色。 -
代碼塊html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
[align]{
color: red;
}
</style>
</head>
<body>
<h2 align="" >微笑是最初的信仰</h2>
<h3 align="">微笑是最初的信仰</h3>
<h4 align="">微笑是最初的信仰</h4>
<h2>微笑是最初的信仰</h2>
</body>
</html>
-
結果圖ui
-
注意：屬性名爲
[align]實踐，想必你們明白了最後一個h2標籤文本顏色沒有被渲染了，是根據屬性名進行樣式添加，因此最後h2標籤文本顏色沒有被渲染。code
屬性名爲[attr=val] 使用方式
- 讓咱們進入屬性名爲
[attr=val]實踐，實踐內容如：將HTML頁面中的屬性名爲align而且屬性值爲center元素文本顏色設置爲紅色。 -
代碼塊htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
[align=center]{
color: red;
}
</style>
</head>
<body>
<h2 align="center">微笑是最初的信仰</h2>
<h2 align="center">微笑是最初的信仰</h2>
<h2 align="">微笑是最初的信仰</h2>
</body>
</html>
-
結果圖blog
-
注意：屬性名爲
[attr=val]實踐，是根據屬性名指定的屬性值去匹配全部元素，因此最後的h2標籤文本顏色沒有被渲染。it
屬性名爲[attr^=val] 使用方式
- 讓咱們進入屬性名爲
[attr^=val]實踐，實踐內容如：將HTML頁面中的屬性名爲color而且屬性值以#f開頭的全部元素文本顏色設置爲藍色。 -
代碼塊table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
[color^="#f"]{
color :mediumblue;
}
</style>
</head>
<body>
<font color="#ff0000" >微笑是最初的信仰</font>
<br/>
<font color="#ff0000">微笑是最初的信仰</font>
<br />
<font color="#ff0000">微笑是最初的信仰</font>
<br />
<font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
-
結果圖class
-
注意：屬性名爲
[attr^=val]實踐，是根據屬性名爲color而且屬性值以#f開頭的全部元素進行文本顏色設置。渲染
屬性名爲[attr$=val] 使用方式
- 讓咱們進入屬性名爲
[attr$=val]實踐，實踐內容如：將HTML頁面中的屬性名爲color而且屬性值以aa結尾的全部元素文本顏色設置爲藍色。 -
代碼塊meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
[color$="aa"]{
color :mediumblue;
}
</style>
</head>
<body>
<font color="#ff00aa" >微笑是最初的信仰</font>
<br/>
<font color="#ff00aa">微笑是最初的信仰</font>
<br />
<font color="#ff00aa">微笑是最初的信仰</font>
<br />
<font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
-
結果圖
-
注意：屬性名爲
[attr^=val]實踐，是根據屬性名爲color而且屬性值以aa結尾的全部元素進行文本顏色設置。
屬性名爲[attr*=val] 使用方式
- 讓咱們進入屬性名爲
[attr*=val]實踐，實踐內容如：將HTML頁面中的屬性名爲color而且屬性值包含aa的全部元素文本顏色設置爲藍色。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
[color*="aa"]{
color :mediumblue;
}
</style>
</head>
<body>
<font color="#ff00aa" >微笑是最初的信仰</font>
<br/>
<font color="#ff00aa">微笑是最初的信仰</font>
<br />
<font color="#ff00aa">微笑是最初的信仰</font>
<br />
<font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
-
結果圖
-
注意：屬性名爲
[attr^=val]實踐，是根據屬性名爲color而且屬性值包含aa的全部元素進行文本顏色設置。
相關文章
- 1. 屬性選擇器
- 2. 精讀《使用 CSS 屬性選擇器》
- 3. jQuery選擇器和屬性選擇器
- 4. CSS3 選擇器——屬性選擇器
- 5. Css3 選擇器 --屬性選擇器
- 6. CSS3選擇器-屬性選擇器
- 7. [css選擇器] 屬性選擇器
- 8. CSS3選擇器——屬性選擇器
- 9. CSS-id選擇器-類選擇器-屬性選擇器
- 10. CSS選擇器之屬性選擇器、關係選擇器
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 屬性選擇器
- 2. 精讀《使用 CSS 屬性選擇器》
- 3. jQuery選擇器和屬性選擇器
- 4. CSS3 選擇器——屬性選擇器
- 5. Css3 選擇器 --屬性選擇器
- 6. CSS3選擇器-屬性選擇器
- 7. [css選擇器] 屬性選擇器
- 8. CSS3選擇器——屬性選擇器
- 9. CSS-id選擇器-類選擇器-屬性選擇器
- 10. CSS選擇器之屬性選擇器、關係選擇器