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