CSS属性选择器可以通过已有的属性名或属性值来匹配元素。属性选择器在CSS2中引入，并在CSS3中得到广泛扩展。本文将更全面地介绍属性选择器，并尽可能多地探索这个选择器在不同场景下的不同用途。语法简单介绍[attr]：这个选择器选择所有包含attr属性的元素，不管attr的值是多少。[attr=val]：该选择器只选择其attr属性被赋值为val的所有元素。[attr~=val]：该选择器只选择具有attr属性的元素，并且要求val值是attr值中包含的以空格分隔的值列表之一。子字符串值（Substringvalue）属性选择器，以下是CSS3新语法，也称为“伪正则选择器”，因为它们提供了类似于正则表达式的灵活匹配方式。[attr|=val]：选择attr属性值为val或以val-开头的元素（注意这里的“-”不是报错，是用来处理语言编码的）。[attr^=val]：选择attr属性值以val开头（包括val）的元素。[attr$=val]：选择attr属性值以val（含）结尾的元素。[attr*=val]：选择attr属性包含子串val的元素（子串只是字符串的一部分，例如“cat”是字符串“caterpillar”的子串）CSS属性选择器最基本的用法属性选择器最基本的用法就是通过属性值来选择DOM元素，这样，所有具有href属性的DOM元素都会被选中：[href]{color:red;}CodePenDemo--属性选择器的基本用法稍微复杂一点，层叠选择div[href]{...}多条件复合选择选择一个img标签，里面有title属性，里面有类名是logo.img[title][class的元素~=logo]{...}伪正则写法i参数忽略类名大小写限制，选择包含类类名子串的p元素为text,Text,TeXt...和很快。这里i的意思就是正则表达式中参数i的意思，ignore，意思是忽略大小写。p[class*="text"i]{...}所以上面的选择器可以像这样选择目标元素：
