属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样可以不用借助于“类选择器”或“id选择器”。

属性选择器的权重为 10。

1、选择含有某属性的元素

<input type="text" value="请输入用户名">
<input type="text">

如果我想选出具有 value 属性的 input 元素，可以这么写：

input[value] {
   color: red;
}

2、选择等于某属性值的元素

<input type="text" value="请输入用户名">
<input type="password">

如果我想选出 input 类型为 password 的元素，可以这么写：

input[type=password] {
   color: red;
}

3、匹配属性值以 xx 开头的元素

<div class="icon1">
<div class="icon2">
<div class="icon3">
<div class="icon4">

input[class^=icon] {
  ...
}

4、匹配属性值以 xx 结尾的元素

<div class="top_box">
<div class="bottom_box">

input[class$=box] {
  ...
}

5、匹配属性值含有 xx 的元素

<div class="icon1">
<div class="icon2">
<div class="nav_icon">

input[class*=icon] {
  ...
}