属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [] 来定义，[] 内部为元素的属性，属性选择器的权重要高于标签选择器

• el[attr=val] 选择 attr 为 val 的 el 元素

  /* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */
  div p[class="blue"] {
  	background: blue;
  }
  

  <div>
    <p class="blue">p 标签</p>
    <p class="blue red">p 标签</p>
    <p class="blue">p 标签</p>
  </div>
  

  

• el[attr *= val] 只要el 元素的 attr 属性值里含有 val 就能被选择

  .box a[class *= "download"]{
  	color: red;
  }
  

  <div class="box">
  	<a href="#" class="download">下载</a>
  	<a href="#" class="musicdownload">下载</a>
  	<a href="#" class="downloadmovie">下载</a>
  	<a href="#" class="image-download">下载</a>
  	<a href="#" class="flast download">下载</a>
  </div>
  

  

• el[attr ~= val] el元素中的 attr 属性的属性值 val 单独存在 或 存在的属性值与其他属性值之间用空格隔开就能被选择

  .box a[class ~= "download"] {
  	color: yellow;
  }
  

  

• el[attr |= val] el 元素中 attr 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 val 在 “-” 前

  .box a[class |= "download"] {
  	color: skyblue;
  	font-size: 20px;
  }
  

  <div class="box">
  	<a href="#" class="download">下载2</a>
  	<a href="#" class="music download">下载2</a>
  	<a href="#" class="image-download">下载2</a>
  	<a href="#" class="download-image">下载2</a>
  	<a href="#" class="downloadmovie">下载2</a>
  </div>
  

  

• el[attr ^= val] el 元素的 attr 属性值里含有 val 且 val 在最前面才能被选择

  .box a[class ^= "download"] {
  	color: pink;
  }
  

  

• el[attr $= val] el 元素的 attr 属性值里含有 val 且 在最后面

.box a[class $= "download"]{
	color: orange;
}