CSS3常用选择器（一）

　　在 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 选择器可用于选取当前活动的目标元素。