css中的派生選擇器有幾種

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程式碼就會運用於包含在

標籤內的所有元素。
關於後代選擇器，很重要的一點是第一個參數和第二個參數之間的代數是可以無限的。

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>

CSS程式碼：

h1 > strong {color:red;}

語法規則是h1和strong之間會有一個「>」符號。而這個「>」和前面的h1或是後面的strong之間的空格都是可有可無的。

在以上的例子中，第一行HTML程式碼裡，元素是

的子元素，所有h1 > strong這個選擇器會選擇到它。

第二行HTML程式碼裡， 不是

的子元素，而是

的孫子，所有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会选择到第一个而不会选到第二个.

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的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

以上是css中的派生選擇器有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！