后面咱们曾经解说了，CSS中的简略选择器，组合选择器，以及伪类和伪元素选择器。如果想做到更加精准的查找，并且进步查找元素的效率，咱们能够应用CSS属性选择器来实现。
CSS属性选择器，是依据属性或属性值来查找元素；
根本语法为：Element中括号attribute（[trbju: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">
明码框：<input type="password">
答复问题：<input type="text">
性别抉择：<input type="radio" name="sex">男 <input type="radio" name="sex">女
是否核酸：<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名字来实现款式润饰，还要持续学习这么多的选择器呢？
简略选择器和组合选择器，能够实现元素的查找，然而咱们学习的其余选择器能够更加精准高效的查找元素，从而能进步咱们编码速度；本节课的属性选择器，在理论开发的过程中，大部分会利用在表单控件中，因为表单控件可增加的属性比拟多，通过属性选择器，可能做到高效查找表单元素。