css 派生选择器+子选择器+相邻兄弟选择器

1.分组使用，号隔开

   eg: h1,h2,h3{...}

2.派生选择器, 很重要的一点是第一个参数和第二个参数之间的代数是可以无限的

   eg: li strong{  font-style:italic; } 只有<li>标签下的<strong>标签 才会是斜体字 

或者：eg:

HTML代码：
<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>
CSS代码:
ul em{color:red;}
以上css的样式会运用于HTML代码中两处橘色的<em>元素。

子选择器（child selector) 

 子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素。
eg：
HTML代码：
<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>
CSS代码：
h1 > strong {color:red;}
语法规则是h1和strong之间会有一个“>”符号。而这个“>”和前面的h1或者是后面的strong之间的空格都是可有可无的。

在以上的例子中，第一行HTML代码里，<strong>元素是<h1>的子元素，所有h1 > strong这个选择器会选择到它。
第二行HTML代码里，<strong> 不是<h1>的子元素，而是<h1>的孙子，所有h1 > strong这个选择器不会选择到它。

相邻兄弟选择器（Adjacent sibling selector）

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 
eg：
HTML代码：
<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>
CSS代码：
h2 + strong {color:red;} 

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。
在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个<strong>而不会选到第二个<strong>.
eg2:
HTML代码：
<div> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</div>
CSS代码：
li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个<li>，所以第一个<li>不会被选择；而第二个<li>是紧挨着第一个li的，所有会被选择；第三个<li>是紧挨着第二个<li>的，也会被选择。