在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。比如最常用到的#id，.class，标签选择器。
随着CSS3到来，增加了很多新型选择器，这里就常用的做一个总结。
1.属性选择器。
在css3中，追加了三个属性选择器，分别为[attribute*=value],[attribute^=value],[attribute$=value],使选择器有了通配符的概念。这三个选择器分别是包含，首字符，结束字符。
举个栗子：
a[src*="abc"]表示选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
a[src^="https"]表示选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[src$=".pdf"]表示选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
2.结构性伪类选择器
CSS3 结构性伪类选择器，包含伪类选择器和伪元素选择器。伪类选择器在css中就存在，不再赘述。在伪元素选择器中包含 first-line、first-letter、before、after。
first-line顾名思义，应该是对某个元素中的第一行使用样式。
first-letter是对某个元素的首字母使用样式。
before用于在某个元素之前插入内容。
after用于在某个元素之后插入内容。
p:first-line{
color:red; /*将p元素第一行内容变为红色*/
}
p:first-letter{
color:blue; /*将p元素首个文字变为蓝色*/
}
li:before{
content:"--"; /*给每一个li元素内容前面加上"--"*/
}
li:after{
content:"这是对列表的解释"; /*给每一个li元素内容后面加上一段文字*/
font-size:18px;
color:green; /*可以加上一些样式以区分*/
}
<p>第一行<br/>第二行</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
3.CSS3 选择器 root、not、empty 和 target
CSS3 选择器 root、not、empty 和 target， root 选择器是绑定到页面的根元素中，如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，可以使用 not，使用 empty 选择器来指定当元素中内容为空白时使用的样式。
root 选择器是绑定到页面的根元素中，根元素是指位于文档中最顶层的元素，在页面中就是指html的部分。如果此时还有body也设置了样式，那么body只在内容部份生效。
:root{
background-color:grey;/*页面背景变成灰色*/
}
not用于排除：
div *not(h1){
/*div中除h1以外都生效*/
}
:empty{}用于当元素内容为空时的样式，比如用在表格中，设置空表格的样式。
:target{}用于突出显示活动的 HTML 锚。
用法一：
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
用法二：
:target{
background-color:pink;/*被选中的区域背景变为粉色*/
}
<a href="#a1">菜单一</a>
<a href="#a2">菜单二</a>
<div id="a1">
<h1>标题</h1>
<p>内容</p>
</div>
<div id="a2">
<h1>标题</h1>
<p>内容</p>
</div>
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。