CSS3新增的属性选择器、关系选择器、结构化选择器

CSS3中新增了多种选择器，通过学习大家可以更轻松的控制网页的布局。属性选择器可以根据元素的属性值来选择元素。CSS3中新增了3中属性选择器。

CSS3新增的属性选择器

E[att^=value]属性选择器是指选择名称为E的标记，且该标记等一流att属性，att属性值包含前缀为value的字符串。E可以省略，省略表示匹配满足条件的任意元素。我们来看一个简单的例子：

div[id^=section] #表示匹配包含id属性，且id属性值是以section字符串开头的div元素 

E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的字符串。与前缀选择器一样，E可以省略，省略表示匹配满足条件的任意元素。我们来看一个简单的例子：

div[id$=section] #表示匹配包含id属性，且id属性是以section字符串结尾的div元素

E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含value的字符串。与前面的两种选择器一样，E可以省略，省略表示匹配满足条件的任意元素。我们来看一个简单的例子：

div[id*=section] #表示匹配包含id属性，且id属性值包含section字符串的div元素

CSS3新增的关系选择器

CSS3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。

子代选择器主要用来选择某个元素的第一级子元素。例如：希望选择只作为h1元素子元素的strong元素。可以写为：h1 > strong。

 <style type="text/css">
        h3>strong{  /*选择h3下的strong标签*/
            color: red;
            font-size: 30px;
            font-family: "微软雅黑"
        }
    </style>
<h3>迷人的<strong>鳄鱼君Ba</strong>先生</h3>
<h3><em>鳄鱼君Ba<strong>欢迎你！</strong></em></h3>

strong标签是h3标签的子元素，所以会选择第一个h3标签。第二个strong元素是h3的孙元素，所以不会添加对应的css样式。

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。它分为临近兄弟选择器和普通兄弟选择器。临近兄弟选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

<style type="text/css">
    p+h3{color: green;font-family: "微软雅黑";font-weight: bold;}
</style>

<h3>静夜思</h3>
<p>床前明月光</p>
<h3>疑是地上霜</h3>
<h3>举头望明月</h3>
<h3>低头思故乡</h3>

以上代码会选择p的下一个兄弟元素h3，也就是p元素紧跟的h3元素，其它的h3元素不会被选择

普通兄弟选择器使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

<style type="text/css">
        p~h3{color: green;font-family: "微软雅黑";font-weight: bold;}
    </style>

<h3>静夜思</h3>
<p>床前明月光</p>
<h3>疑是地上霜</h3>
<h3>举头望明月</h3>
<h3>低头思故乡</h3>

h3元素不必紧跟p元素，也就是会选择p元素下的所有h3元素。

CSS3新增的伪类选择器

:root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

<style type="text/css">
        :root{color: red;}
        h3{color: blue;}
    </style>

<h3>《面朝大海春暖花开》</h3>
<p>从明天起做一个幸福的人，喂马劈柴周游世界，从明天起关心粮食和蔬菜，我有一所房子，面朝大海春暖花开！</p>

页面中所有的字体颜色为红色，h2标签颜色为蓝色。h2元素定义的样式覆盖的root选择器的样式。如果没有指定h2元素样式，那么所有的字体颜色都为红色。

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用“:not选择器”。

<style type="text/css">
       body *:not(h2){    /*样式不应用与h2标签*/
        color: orange;
        font-size: 24px;
        font-family: "微软雅黑"
       }

    </style>
<h3>世界上最远的距离</h3>
<p>世界上最远的距离</p>
<p>不是生与死的距离</p>
<p>而是我站在你面前</p>
<p>你却不知道我爱你</p>

:only-child选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某一个父元素仅有一个子元素，则使用“:only-child选择器”可以选择这个子元素。我们来看一个简单的案例：

<style type="text/css">
      li:only-child{color: red;} /*ul元素只有一个li元素*/
</style>

<div>
    精彩电影
    <ul>
        <li>终结者3：黑暗命运</li>
        <li>非诚勿扰</li>
    </ul>
    日本动漫
    <ul>
        <li>蜡笔小新</li>
        <li>火影忍者</li>
        <li>一拳超人</li>
    </ul>
    伦理电影
    <ul>
        <li>妻子的朋友</li>
    </ul>
</div>

:first-child选择器和:last-child选择器分别用于为父元素中第一个或者最后一个子元素设置样式。我们来看一个简单例子：

 <style type="text/css">
      p:first-child{color: red;font-size: 30px;font-family: "微软雅黑"} /*设置第一个p元素*/
      p:last-child{color: blue;font-size: 20px;} /*设置最后一个p元素*/
    </style>

<p>第一篇 长大了</p>
<p>第二篇 毕业了</p>
<p>第三篇 结婚了</p>
<p>第四篇 享受生活</p>

:empty选择器用来选择没有子元素或文本内容为空的所有元素。

<style type="text/css">
      p{
        width: 150px;
        height: 30px;
      }
      :empty{background-color: #999;}  /*将空p元素的背景设置为灰色*/
    </style>

<p>第一篇 长大了</p>
<p>第二篇 毕业了</p>
<p>第三篇 结婚了</p>
<p></p>
<p>第四篇 享受生活</p>

有关伪元素选择器，链接伪类的内容可参考：CSS3新增的选择器 伪元素选择器、链接伪类。