CSS3 --- 选择器

css3就是指css2+新语法，是对css2进行的扩充、删减和优化。

css3选择器依旧支持css2的选择器语法：类选择器、id选择器、标签选择器、复合选择器；

css3属性选择器

标签、属性、属性值统称为html元素，下面以无序列表作为示例：

<div class="box">
    <ul>
        <li class="one">html</li>
        <li class="two">css</li>
        <li class="three">javascript</li>
        <li class="col-one">mysql</li>
        <li class="col-md">jquery</li>
        <li>php</li>
    </ul>
</div>

E => element 元素     data => 属性

E[data]   =>   选择带有data属性的元素对象，例：

.box ul li[class]{}   //选择所有的带有clss属性的<li>

E[data="one"]   =>   选择带有data属性的元素对象，且属性值为one的，例：

.box ul li[class="one"]{}   //选取的是第1个<li>

E[data^="o"]   =>   选择带有data属性的元素，且属性值以o开头的，例：

.box ul li[class^="c"]{}   //选择的是第4、5个<li>

 E[data$="e"]   =>   选择带有data属性的元素，且属性值以e结尾的，例：

.box ul li[class$="e"]{}   //选择的是第1、3、4个<li>

E[data*="n"]   =>   选择带有data属性的元素，且属性值包含n的，例：

.box ul li["col-"]{}   //选择的是第4、5个<li>