属性选择器理解记录

属性选择器可以通过指定查找标签中拥有某个属性来选择标签，也可以通过查找标签中拥有某个属性，并且这个属性有个特定的值来选择标签。

[attribute]属性

通过这种方式来指定我们的标签，比如，指定页面标签中的 img 标签，并且这个 img 标签拥有 alt 属性。这个时候我们要指定它，就可以使用这个选择器，格式为 img[alt]

[attribute]属性也可以选择里面的值为什么来选择标签，常用在input 标签中。

在CSS2中，我们通过 [attribute|=value] 指定该属性的属性值的开头是什么单词来指定标签。如，选择input 标签中 type为passWord 的标签，格式为 input[type|=password]。

我们可以通过 [attribute~=value] 指定该属性的属性值包含什么单词来指定标签。如，选择class 属性中包含 abc 属性值得标签，那么格式就为 input[class~=abc]。

看上去以上两种似乎功能都很强大，但是都有一定的缺陷。

使用 [attribute|=value] 在指定开头属性值的时候，如果选择的属性值内容很多，那么它所指定的属性值必须是有“-”隔开的才能被选中，这个时候弊端就出来了，需要程序员在命名时很有讲究，比如查找<p class="abcdef" ></p>出来，这时候用这个选择器查找 p[class|=abc] 就无法找到了，除非 p 标签原有的class 属性值为 abc-def。

而使用[attribute~=value] 在指定包含属性值标签的时候，同样的有它打弊端，这个选择器要求包含在属性值中的内容，必须用空格隔开，比如查找<p class="abcdef"></p>，如果我们我们输入 p[class~=cd]，这样是无法找到这个标签的，除非class 原来的值为 class=ab cd ef。

很显然，上面的方式对编程时标签的命名都有很高的要求。

在CSS3中的[attribute] 属性有了新的符号可以替代和消除这些弊端。

当我们想要查找到属性值开头为某个单词的标签时，我们使用 [attribuet^=value] 来指定，使用这个方法，比如我们想要找到input 标签中 type为password 的标签，我们只要通过 input[type^=p] 就可以找到了，这里的 p 也可以换成以 p 开头一直往下的几位的都行。

有了开头，CSS3还提供了CSS2没有的，以某个属性值结尾的功能，我们使用 [attribute$=value] 来指定，使用这个方法，我们想要找到input 标签中 type为password 的标签，我们只要通过 input[type$=d] 就可以查找到，同样的，这里的 d 也可以换成以 d 开始往上的几位都行。

最后还有包含功能，我们想要找到<p class="abcdef" ></p>，我们可以通过使用 [attribute*=value] 来指定，格式为 p[class*=ed] ，这里的 ed 也可以向两边自由拉伸变化。

在企业开发中，要根据需求选择不同的选择器类型来实现样式功能。