1. Use attribute selectors without using class or id selectors
Example: select the first input:
<input type="text" value="请输入用户名">
<input type="text">css3 settings selection:
/*应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素*/
input[value]{
color: pink;
}2. The attribute selector can also select certain elements of the = value
Example: select the first input:
<input type="text" name="" id="">
<input type="password" name="" id="">css3 settings selection:
/*不局限于input,div[class=a]或者其他标签也可以*/
input[type=test]{
color: pink;
}3. The attribute selector can select some elements at the beginning of the attribute value
Example: Select a div whose class starts with icon:
<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 settings selection:
/*选择首先是div 然后 具有class属性 并且属性名必须是icon开头的*/
div[class^=icon]{
color:gray
}4. The attribute selector can select some elements at the end of the attribute value
Example: select a div whose class ends with data:
<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 settings selection:
/*选择首先是div 然后 具有class属性 并且属性名必须是data结尾的*/
div[class$=data]{
color:gray
}5. The attribute selector can select some elements contained in the attribute value
Example: Select the div containing abc in the class:
<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 settings selection:
/*选择首先是div 然后 具有class属性 并且属性名必须包含abc的*/
div[class*=abc]{
color:gray
}