CSS3-属性选择器

最近上班不忙，摸到一本HTML5和CSS3权威指南，上册是HTML5，下册是CSS3。没看HTML5是因为上册放在茶水间一摞书的最上面，全是灰，所以抽了下面的CSS3看。正好最近样式写的自己都觉得有点一坨的感觉。。。但愿一个月能看完

属性选择器不是CSS3新出的，原来也有，只是在原来的基础上进行了扩展。

1. CSS2属性选择器

语法：

ele[attr=value] // 变量从前往后依次是元素、属性名、属性值

例如：

div[id=section]  // id为section的div元素

2. CSS3属性选择器

css3扩展了如下：

1. 以value开头

[attr^=value] 

例如：

<div class="wrap">
  <div class="wrap-header">
  <div class="wrap-content">
</div>
//css如下：
[class^=wrap] { // class以wrap开头的所有元素，但是优先级低，即使使用了!important也无效
   color: "#f00"
}

2. 以value结尾

[attr$=value]

例如：

<div class="wrap">
  <div class="header-1">
  <div class="content-1">
</div>
//css如下：
[class$=\-1] { // !!!其中-需要转义
   color: "#f00"
}

3. 包含value

[attr*=value]