如何使用属性选择器
程序员文章站
2022-05-18 20:56:40
属性选择器介绍 属性选择器可以根据元素的属性及属性值来选择元素。 属性选择器有什么好处呢,如:可以通过标签的属性名和属性值来匹配对应的元素。 是英文单词 的简写,中文意思就是 或`属性名`。 是英文单词 的简写,中文意思就是 或`属性值`。 属性选择器必须使用 中括号。 属性选择器说明表 属性名 | ......
属性选择器介绍
- 属性选择器可以根据元素的属性及属性值来选择元素。
- 属性选择器有什么好处呢,如:可以通过标签的属性名和属性值来匹配对应的元素。
-
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
元素文本颜色设置为红色。 代码块
<!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>
结果图
注意:属性名为
[align]
实践,想必大家明白了最后一个h2
标签文本颜色没有被渲染了,是根据属性名进行样式添加,所以最后h2
标签文本颜色没有被渲染。
属性名为[attr=val] 使用方式
- 让我们进入属性名为
[attr=val]
实践,实践内容如:将html
页面中的属性名为align
并且属性值为center
元素文本颜色设置为红色。 代码块
<!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>
结果图
注意:属性名为
[attr=val]
实践,是根据属性名指定的属性值去匹配所有元素,所以最后的h2
标签文本颜色没有被渲染。
属性名为[attr^=val] 使用方式
- 让我们进入属性名为
[attr^=val]
实践,实践内容如:将html
页面中的属性名为color
并且属性值以#f
开头的所有元素文本颜色设置为蓝色。 代码块
<!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>
结果图
注意:属性名为
[attr^=val]
实践,是根据属性名为color
并且属性值以#f
开头的所有元素进行文本颜色设置。
属性名为[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
结尾的所有元素进行文本颜色设置。
属性名为[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
的所有元素进行文本颜色设置。