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>