属性选择器-CSS3-正则表达式与选取特定

作者: Darren 分类: html与css 发布时间: 2019-05-12 08:27

属性选择器一般多用于表单控件标签

什么是属性选择器？

属性选择器它是与HTML标签的属性名和属性值有关。
属性选择器是通过HTML标签的属性名和属性值来匹配元素.

说明:attr是英文单词”attribute”的简写，中文意思”属性”

属性名val是英文单词”value”的简写，中文意思是”值” 属性值

案例演示:使用font标签设置color属性,先找到font标签,然后再匹配color属性,匹配到了设置边框属性
```
文本
文本
文本
文本
文本
文本
```
[attr]根据属性名来匹配元素

[attr=”val”]属性到等于指定的值才匹配

[attr^=”val”]要求属性的值是以指定的值开头的元素才匹配

[attr$=”val”] 要求属性的值是以指定的值结尾的才匹配

[attr*=”val”]要求属性的值包含的指定的值则匹配

**举例:**

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*[attr]根据属性名来匹配元素*/
		/*font[color]{
			border:1px solid red;
		}*/

		/*[attr="val"]属性到等于指定的值才匹配*/
		/*font[color="#ff000a"]{
			border:1px solid red;
		}*/

		/*[attr^="val"]要求属性的值是以指定的值开头的元素才匹配*/
		/*font[color^="#ff"]{
			border:1px solid red;
		}*/

		/*[attr$="val"] 要求属性的值是以指定的值结尾的 才匹配*/
		/* font[color$="aa"]{
			border:1px solid red;
		} */

		/*[attr*="val"]要求属性的值包含的指定的值 则匹配	*/
		font[color*="0000"]{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<font color>文本</font>
	<font>文本</font>
	<font color="#ff000a">文本</font>
	<font color="#ffffaa">文本</font>
	<font color="#000000">文本</font>
	<font color="#ffaaaa">文本</font>
</body>
</html>