css中有哪些派生選擇器

這篇文章將為大家詳細講解有關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代碼：

    <h2>This is a<em>important</em>heading</h2>

CSS代碼：

    h2 em {color:red;}

語法規則是 h2 和 em 之間有一個空格。那么這一條CSS代碼就會運用于包含在<h2></h2>標簽內的所有<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代碼：

<h2>This is <strong>This will be styled.</strong> important.</h2>
<h2>This is <em>really <strong>This will not be styled.</strong></em> important.</h2>

CSS代碼：

h2 > strong {color:red;}

語法規則是h2和strong之間會有一個“>”符號。而這個“>”和前面的h2或者是后面的strong之間的空格都是可有可無的。

在以上的例子中，第一行HTML代碼里，<strong>元素是<h2>的子元素，所有h2 > strong這個選擇器會選擇到它。

第二行HTML代碼里，<strong> 不是<h2>的子元素，而是<h2>的孫子，所有h2 > strong這個選擇器不會選擇到它。

相鄰兄弟選擇器（Adjacent sibling selector）

相鄰兄弟選擇器會選擇某一元素緊隨其后的元素，但是前提是他們擁有相同的父級。

eg：

HTML代碼：

<h2>
    <h3>This is a heading<h3>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h2>

CSS代碼：

h3 + strong {color:red;}

語法規則是h3和strong之間有一個“＋”，“＋”和前面的h2或者后面的strong之間的空格都是可有可無的。

在 以上例子中，第一個strong緊鄰著h3并且他們擁有相同的父級(h2)，所以h3 + 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中有哪些派生選擇器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。