共计 2530 个字符，预计需要花费 7 分钟才能阅读完成。
后面咱们曾经解说了，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”>
明码框：<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 名字来实现款式润饰，还要持续学习这么多的选择器呢？
简略选择器和组合选择器，能够实现元素的查找，然而咱们学习的其余选择器能够更加精准高效的查找元素，从而能进步咱们编码速度；本节课的属性选择器，在理论开发的过程中，大部分会利用在表单控件中，因为表单控件可增加的属性比拟多，通过属性选择器，可能做到高效查找表单元素。
