CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法

子代选择器

子代选择器用 > 表示，只选择指定元素的子元素（儿子标签）；IE7开始兼容，IE6不兼容

div>p{
    color:red;
}

div 标签的儿子（一级子标签） p 标签；和 div 标签的后代（当前元素下的所有子标签） p 标签截然不同

能够选择：

<div>
	<p>我是div的儿子p>
div>

不能选择：

<div>
    <ul>
        <li>
            <p>我是div的重孙子p>
        li>
    ul>
div>

顺序选择器

• :first-child 选择指定父元素中第一个子元素；first（第一个），child（孩子）
• :last-child 选择指定父元素中最后个子元素；last （末尾、最后）
• IE8开始兼容，IE6、7都不兼容

示例：

选择父级元素为 div 中的第一个后代元素 p：

div p:first-child{
    color: red;
    background: yellow;
}

<div class="box">
  <a href="#"><p>p 标签p>a>
  
  <p>p 标签1p>
  <p>p 标签2p>
  <p>p 标签3p>
  <p>p 标签4p>

  <div>
    <p>p 标签11p>
    <p>p 标签22p>
  div>
div>

"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法_第1张图片" width="650" height="203" style="border:1px solid black;">
选择父级元素为 div 中的最后一个后代元素 p：

div p:last-child{
    color:blue;
}

"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法_第2张图片" width="650" height="193" style="border:1px solid black;">
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

<ul>
    <li class="first">项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li>项目li>
    <li class="last">项目li>
ul>

用类选择器来选择第一个或者最后一个：

ul li.first{
    color:red;
}

ul li.last{
	color:blue;
}

下一个兄弟选择器

+ 表示选择下一个兄弟元素；选择指定的第一个元素之后紧跟的元素（兄弟元素）

IE7开始兼容，IE6不兼容

h3+p{
	color:red;
}

选择上的是h3元素后面紧挨着的第一个兄弟。

<h3>我是一个标题h3>
<p>我是一个段落p>
<p>我是一个段落p>
<h3>我是一个标题h3>
<p>我是一个段落p>
<p>我是一个段落p>
<h3>我是一个标题h3>
<p>我是一个段落p>
<p>我是一个段落p>
<h3>我是一个标题h3>
<span>我是一个sapn标签span>

"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法_第3张图片" width="370" height="540" style="border:1px solid black;">

后面所有的兄弟选择器

~ 表示后面所有兄弟元素

选择 h1 标签后面所有兄弟元素 p 标签

h1~p {
    background: yellow;
}

<div>
  <h1>h1 标签h1>
  <p>p 标签p>

  <span>span 标签span>
  <ul>
    <li>
      <p>p 标签p>
    li>
  ul>
  
  <p>p 标签p>
div>

"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法_第4张图片" width="650" height="152" style="border:1px solid black;">