前面我们已经讲解了，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" class="box"> <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 class="box">我是是一个div元素,我有一个类名叫做box</div>

<div class="box-qf">我是是一个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名字来完成样式修饰，还要继续学习这么多的选择器呢?

　　简单选择器和组合选择器，可以完成元素的查找，但是我们学习的其他选择器可以更加精准高效的查找元素，从而能提高我们编码速度;本节课的属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多，通过属性选择器，能够做到高效查找表单元素。

　　总结一下属性选择器的语法情况，大家快来一起试试吧

上一篇

CSS清除浮动的多种方法

下一篇

超实用的 Linux 高级命令，程序员一定要懂！