CSS3——属性选择器

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设置选择：

/*选择首先是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
        }