css中的派生选择器有3种：1、后代选择器，语法“e f{样式代码}”；2、子元素选择器，语法“e > f {样式代码}”；3、相邻兄弟选择器，语法“e + f {样式代码}”。
本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
css之派生选择器（上下文选择器）选择器（selector）是css里面非常重要地一部分知识。
根据我暂时浅薄地理解，css就是对一份html代码里面的元素进行运用各种样式。
所以，第一步就是要准确地定位你想要运用样式的元素。
css里面通过各种选择器来定位元素。 css里面选择器有很多种，今天就只想说说 “派生选择器”。
一听“派生选择器”这个名字，我真心做不到见名知义地感觉它是什么选择器。一看英文名叫“contextual selectors” ,如果直译就叫“上下文选择器”。虽然名字不文雅，但是我更偏向这个名字。
contexual selector是通过依据元素在其位置的上下文关系来定义样式的。
上下文选择器的情况有三种：后代选择器，子元素选择器，相邻兄弟选择器。 
后代选择器（descendant selector)
eg:
html代码：
    <h1>this is a<em>important</em>heading</h1>
css代码： 
    h1 em {color:red;}
语法规则是 h1 和 em 之间有一个空格。那么这一条css代码就会运用于包含在<h1></h1>标签内的所有<em>元素。关于后代选择器，很重要的一点是第一个参数和第二个参数之间的代数是可以无限的。
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代码：
<p>     <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> </p>
css代码：
li + li {color:red;}
在以上的例子中li+li是选择紧挨着li后面的第一个<li>，所以第一个<li>不会被选择；而第二个<li>是紧挨着第一个li的，所有会被选择；第三个<li>是紧挨着第二个<li>的，也会被选择。
（学习视频分享：css视频教程）
以上就是css中的派生选择器有几种的详细内容。