该部分主要为CSS3新增的选择器
接上一篇 CSS（CSS3）选择器（1）
一.通用兄弟选择器:
24：E ~ F，匹配任何E元素之后的同级F元素。
div ~ p{ ???background-color:#00FF00;}二.属性选择器:
25：E[att ^= val]，匹配属性att的值以”val“开头的元素。
[id ^= start]{ ???background-color:red;]/*匹配以id属性的值为start开头的，如id="start1",id="start2",id="start3"的元素*/26：E[att $= val]，匹配属性att的值以”val“结尾的元素。
[id $= end]{ ???background-color:red;]/*匹配以id属性的值为end结尾的，如id="1end",id="2end",id="3end"的元素*/27：E[att *= val]，匹配属性att的值包含”val“字符串的元素。
[id $= hass]{ ???background-color:red;]/*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素*/三.结构性伪类选择器:
28：E:root，匹配文档的根元素，对于HTML文档，就是HTML元素。（也就是说可能存在其他文档形式时使用，选中的是该文档类型的根元素）
:root{ ???background:red;}/*经测试，像div:root这样的写法是无效的*/29：E:not，匹配不符合当前选择器的任何元素。
h1:not(.name) { ???color: red;}/*其含义是，匹配所有h1元素的类名不为name的h1元素，如果:not选择器前面不带指明的元素是无效的*/30：E:empty，匹配一个不包含任何子元素的元素，包括文本节点。
.box:empty{ ???background:pink;}31：E:target，匹配文档中特定”id“，点击后的效果。
:target{ ???background: red;}/*通常用于锚点定位后，定位的目标点样式*/32：E:last-child，匹配父元素的最后一个子元素。
li:last-child{ ???background-color:red;}33：E:nth-child(n)，匹配其父元素的第n个子元素，从1开始。
li:nth-child(2){ ???background-color:red;}
li:nth-child(odd){ ???background-color:red;}34：E:nth-last-child(n)，匹配其父元素的倒数第n个子元素，倒数第一个的index为1。
li:nth-last-child(2){ ???background-color:red;}
li:nth-last-child(even){ ???background-color:red;}35：E:nth-of-type(n)，与:nth-child()作用类似，但是仅匹配同类型的元素。
h2:nth-of-type(odd){ ???background:red;}36：E:nth-last-of-type(n)，与:nth-last-child() 作用类似，但是仅匹配同类型的元素。
h2:nth-last-of-type(even){ ???background:red;}37：E:first-of-type，匹配父元素下使用同种标签的第一个子元素。
h2:first-of-type{ ???background-color: yellow;}38：E:last-of-type，匹配父元素下使用同种标签的最后一个子元素。
h2:last-of-type{ ???background-color: yellow;}39：E:only-child，匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
li:only-child{ ???background-color: yellow;}40：E:only-of-type，匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
li:only-of-type{ ???background-color: yellow;}四.UI元素状态伪类选择器:
41：E:enabled，匹配表单中激活的元素。
input[type="text"]:enabled{ ???background-color:yellow; }42：E:disabled，匹配表单中禁用的元素。
input[type="text"]:disabled{ ???background-color:purple;}43：E:read-only，指定当元素处于只读状态时的样式。
input[type="text"]:read-only{ ???????background-color: gray;}44：E:read-write，指定当元素处于非只读状态时的样式。
input[type="text"]:read-write{ ???????background-color: greenyellow;}45：E:checked，匹配表单中被选中的radio（单选框）或checkbox（复选框）元素。
input[type="checkbox"]:checked { ???outline:2px solid blue;}46：E:default，指定但页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框的选取状态设定为非选取状态，该样式仍然有效。
input[type="checkbox"]:default { ???outline:2px solid ?blue;}47：E:indeterminate，指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时，整组单选框的样式，如果用户选取了任何一个单选框，那么该样式则取消。
input[type="radio"]:indeterminate{ ???????outline: solid 3px blue;}48：E::selection，用来指定该元素处于选中状态时的样式。
p::selection{ ???background:red; ???color:#FFF;}input[type="text"]::selection{ ???background:gray; ???color:#FFF;}49：E:invalid，用来指定元素的内容无法通过H5元素的属性所指定的检查（required）或元素的内容不符合规定的格式（type=Email等）。
input[type="text"]:invalid{ ???background-color: red;}50：E:valid，用来指定元素的内容可以通过H5元素的属性所指定的检查（required）或元素的内容不符合规定的格式（type=Email等）。
input[type="text"]:valid{ ???background-color: white;}51：E:required，用来指定允许使用required属性，并且已经指定了required属性的input，select，textarea元素的样式。
input[type="text"]:required{ ???border-color: red; ???border-width:3px;}52：E:optional，用来指定允许使用required属性，并且未指定了required属性的input，select，textarea元素的样式。
input[type="text"]:optional{ ???border-color: black; ???border-width:3px;}53：E:in-range，用来指定当元素的有效值被限定在一定范围之内（通常通过min属性值或者max属性值来限定），且实际输入值在该范围内时使用的样式。
input[type="number"]:in-range{ ???background-color: white;}54：E:out-of-range，用来指定当元素的有效值被限定在一定范围之内（通常通过min属性值或者max属性值来限定），且实际输入值不在该范围内时使用的样式。
input[type="number"]:out-of-range{ ???background-color: red;}55：E::placeholder，用来改变文字占位符的样式。
input::placeholder{ ???color:red;}至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，还有些不常用的如果大家有兴趣，可以自行搜索资料。
参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
CSS(CSS3)选择器（2）
原文地址：https://www.cnblogs.com/zaking/p/8322284.html