爱站程序员基地CSS3中那些新增的选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
css3之前的选择器
- id选择器
- 类选择器
- 伪类选择器（:link,visited,hover,active,focus,first-child）
- 伪元素选择器（::first-line,first-letter,before,after）
- 通配选择器(*)
- 属性选择器(E[att=“val”])
- 子包含选择器(E>F)
- 相邻选择器(E+F)
css3新增的选择器
- 新增属性选择器
E[att^=“val”] ：选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”] ：选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=“val”] ：选择具有att属性且属性值为包含val的字符串的E元素。
<style>div[class^=\"a\"]{ /*以a开始*/background-color: blue;}div[class$=\"a\"]{ /*以a结束*/background-color: green;}div[class*=\"a\"]{ /*选择到所有含a的*/background-color: red;}</style><div class=\"abc\">div1</div><div class=\"acc\">div2</div><div class=\"cba\">div3</div>
- 新增的伪类选择器
E:not(s)：匹配不含有s选择符的元素E。
E:root：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:last-child ：匹配父元素的最后一个子元素E。
E:only-child：匹配父元素仅有的一个子元素E。
E:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-last-child(n) ：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type：匹配父元素下第一个类型为E的子元素。
E:last-of-type：匹配父元素下的所有E子元素中的倒数第一个。
E:only-of-type：匹配父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n) ：匹配父元素的第n个子元素E。
E:nth-last-of-type(n)：匹配父元素的倒数第n个子元素E。
E:empty：匹配没有任何子元素（包括text节点）的元素E。
<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匹配 -->
- UI元素状态伪类选择器
E:checked ：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled ：匹配用户界面上处于可用状态的元素E。
E:disabled ：匹配用户界面上处于禁用状态的元素E。
<style type=\"text/css\">input:checked{width: 200px;height: 200px;background-color: green;}input:checked+span::after{content: \"选中了这个\";color: indigo;background-color: lightcoral;}</style>···<label><input type=\"checkbox\"><span></span></label><!-- 选中复选框，改变了复选框的样式 -->
E:target：匹配相关URL指向的E元素。对应锚点的样式
<style type=\"text/css\">h2:target{color:red;}</style>......<a href=\"#tit01\">标题一</a>......<h2 id=\"tit01\">标题一</h2><!-- 点击链接，h2标题变红 -->
- 新增伪对象选择器
E::placeholder ：设置对象文字占位符的样式。
E::selection ：设置对象被选择时的样式。
