css中的衍生選擇器有3種：1、後代選擇器，語法「E F{樣式代碼}」；2、子元素選擇器，語法「E > F {樣式代碼}」； 3.相鄰兄弟選擇器，語法「E F {樣式代碼}」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
選擇器（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程式碼就會運用於包含在
標籤內的所有元素。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程式碼中兩處橘色的元素。
子選擇器（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>
h1 > strong {color:red;}鄰近兄弟選擇器（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会选择到第一个而不会选到第二个.
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后面的第一个
（学习视频分享：css视频教程）
以上是css中的派生選擇器有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！
