前面我们已经讲解了，CSS中的简单选择器，组合选择器，以及伪类和伪元素选择器。如果想做到更加精准的查找，并且提高查找元素的效率，我们可以使用CSS属性选择器来完成。
CSS属性选择器，是根据属性或属性值来查找元素；
基本语法为：Element中括号attribute（[əˈtrɪbju:t ]）（Element[attribute]）或者Element，中括号attribute等于value(Element[attribute=’value’])，实现快速精准查找元素。
在这里注意的是：element译为元素，attribute译为属性，Element attribute 的含义是：查找带有该属性的元素，然后添加样式声明。
a[target] {
background-color: yellow;
}
例如：以上代码的含义是：查找带有target属性的a元素，并且添加了背景颜色为黄色的样式声明。
在CSS选择器中，目前有四种属性选择器可供大家使用：
第一种：通过，使用中括号attribute（[attribute]），来查找HTML结构中，带有attribute属性的所有元素。
第二种：通过，使用中括号attribute等于value（[attribute=’value’]），来查找HTML结构中带有attribute属性，并且属性值为value的元素。
第三种：通过，使用中括号attribute波浪线等于value（[attribute~=‘value’]），来查找HTML结构中带有attribute属性，并且在多个属性值中包含value取值的元素。
第四种：通过，使用中括号attribute竖杠等于value（[attribute|=”value”]），来查找HTML结构中带有attribute属性，并且属性值以value或者是value横岗(value-)开头的元素；在这里需要注意的是，该属性的值只能有一个，不能有多个。
接下来详细的为大家来介绍不同属性选择器的使用情况，在004目录下创建一个attribute_selector.html文件，构建基础代码，
在body元素内部，添加准备好的基本结构，里面包含输入框，密码框，单选框以及带有类名的p元素和div元素。
<h1>基础信息</h1>
用户名：<input type="text"> <br>
密码框：<input type="password"> <br>
回答问题：<input type="text"> <br>
性别选择：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>
是否核酸：<input type="radio" name="yesOrno">是 <input type="radio" name="yesOrno">否
<h1>元素修饰</h1>
<p class="box big bobo">我是一个p元素我有三个类名,分别是:box big bobo</p>
<p class="box bobo">我是一个p元素,我有两个类名分别是:box和bobo</p>
<div>我是是一个div元素,我有一个类名叫做box</div>
<div>我是是一个div元素,我有一个类名叫做box-qf</div>
在head元素里面添加style元素，使用属性选择器：中括号type([type]{})，查找页面元素中，所有携带type属性的元素。并添加样式声明：width:50px height:50px; ([type]{width:50px; height:50px;})在浏览器中能清楚的看到输入框，密码框以及单选框都实现了宽度高度的调整；
如果只想修饰单选框中的性别该如何实现呢？显然，直接使用中括号type（[type]）是不能完成的。因为，中括号type（[type]）查找到的是，所有携带type属性的元素，查找范围过于宽泛；
为了提高查找的精确度，可以使用中括号name等于sex（[name=”sex”]），并添加样式声明：width:20px height:20px（[name='sex']{width:20px;height:20px}）；再次观察浏览器，性别对应的单选框，大小已经发生了改变。
回到代码中我们继续编写一段代码，中括号class波浪线等于box（[class~=”box”]），添加样式声明:background-color:yellow，我们发现，在浏览器中，第一个输入框，以及两个p元素，和第一个div元素，都实现了背景颜色的改变，因为这些标签，都带有class属性并且属性值中都有box这个取值；
回到代码中，再来编写一段代码，中括号class竖杠等于box（[class|=”box”]），并添加样式声明backgrund-color:skyblue，回到浏览器中，这时，第一个输入框，和最后两个div元素背景颜色发生了改变。
也许你会想，为什么刚刚修饰完成的第一个input输入框，以及第一个div元素，背景颜色会再次发生样式改变呢？
这是因为在计算机编码世界中，代码是按照从上向下的顺序执行的。这就好比：我可以穿一件T恤出门，我也可以再穿一件外套，外套会将T恤遮盖掉。
中括号class波浪线等于box([class~=box])，能查找到页面中带有class属性，并且向取值中包含box的元素应用样式声明。
继续添加代码，通过中括号class竖杠等于box([class|=box])，再次查找页面中带有class属性，并将取值为box或者是box杠（box-）开头的元素，此时，第一个input输入框和第一个div元素再次被查找到，并添加样式声明，后面的样式把前面的样式覆盖掉了，所以会发生改变；
做到这里也许你还存有疑问：为什么完全可以起类名或者是起id名字来完成样式修饰，还要继续学习这么多的选择器呢？
简单选择器和组合选择器，可以完成元素的查找，但是我们学习的其他选择器可以更加精准高效的查找元素，从而能提高我们编码速度；本节课的属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多，通过属性选择器，能够做到高效查找表单元素。