1. 程式人生 > >css 派生選擇器+子選擇器+相鄰兄弟選擇器

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>的,也會被選擇。