CSS3 选择器 属性选择器介绍

从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种：

E[attr]：只使用属性名，但没有确定任何属性值；
 
E[attr="value"]：指定属性名，并指定了该属性的属性值；

E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写；

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

为了更好的说明CSS3属性选择器的使用方法，我们把第一节的demo换成别的结构，如下所示：

初步美化一下上面的代码

最初效果如下所示：

下面就开始针对上面列出的每个属性选择器来，具体分析其使用方法。