CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css"> ???????????????.list div:nth-child(2){ ???????background-color:red; ???}</style>......<div class="list"> ???<h2>1</h2> ???<div>2</div> ???<div>3</div> ???<div>4</div> ???<div>5</div></div><!-- 第2个子元素div匹配 -->

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

属性选择器：
1、E[attr] 含有attr属性的元素

<style type="text/css"> ???div[data-attr=‘ok‘]{ ???????color:red; ???}</style>......<div data-attr="ok">这是一个div元素</div>

2、E[attr=‘ok‘] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok‘] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok‘] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok‘] 含有attr属性的元素且它的值中含有“ok”

CSS3新增选择器

原文地址：https://www.cnblogs.com/jyue/p/10504008.html