属性选择器 - 学习 Web 开发编辑

从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。

学习前提：	基础电脑知识，安装了基本的软件，处理文件的基本知识， HTML基础（学习HTML介绍），以及对CSS工作原理的了解（学习CSS初步）
目标：	学习属性选择器是什么，如何使用。

存否和值选择器

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

选择器	示例	描述
`[attr]`	`a[title]`	匹配带有一个名为attr的属性的元素——方括号里的值。
`[attr=value]`	`a[href="https://example.com"]`	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
`[attr~=value]`	`p[class~="special"]`	匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
`[attr\|=value]`	`div[lang\|="zh"]`	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

下面的示例中，你可以看到这些选择器是怎样使用的。

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

选择器	示例	描述
`[attr^=value]`	`li[class^="box-"]`	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
`[attr$=value]`	`li[class$="-box"]`	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
`[attr*=value]`	`li[class*="box"]`	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。