1.利用属性选择器可以不用借助类或者id选择器
例子：选择第一个input：
<input type="text" value="请输入用户名">
<input type="text">css3设置选择：
/*应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素*/
input[value]{
color: pink;
}2.属性选择器还可以选择=值的某些元素
例子：选择第一个input：
<input type="text" name="" id="">
<input type="password" name="" id="">css3设置选择：
/*不局限于input,div[class=a]或者其他标签也可以*/
input[type=test]{
color: pink;
}3.属性选择器可以选择属性值开头的某些元素
例子：选择class开头为icon的div：
<div class="icon1">hello</div>
<div class="icon2">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>
css3设置选择：
扫描二维码关注公众号，回复：
15699095 查看本文章
/*选择首先是div 然后 具有class属性 并且属性名必须是icon开头的*/
div[class^=icon]{
color:gray
}4.属性选择器可以选择属性值结尾的某些元素
例子：选择class结尾为data的div：
<div class="icon1-data">hello</div>
<div class="icon2-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>
css3设置选择：
/*选择首先是div 然后 具有class属性 并且属性名必须是data结尾的*/
div[class$=data]{
color:gray
}5.属性选择器可以选择属性值包含的某些元素
例子：选择class中包含abc的div：
<div class="icon1abc-data">hello</div>
<div class="icon2abc-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>css3设置选择：
/*选择首先是div 然后 具有class属性 并且属性名必须包含abc的*/
div[class*=abc]{
color:gray
}