- 後代選擇器比子選擇器的範圍大,包含子選擇器,且包含子選擇器的「子孫」選擇器,後代選擇器使用"空格"符號間隔選擇器
- 子選擇器:子選擇器只是父選擇器的一級子元素,使用">"符號連接選擇器
- 相鄰兄弟選擇器,是擁有相同父元素,且兩個元素相鄰,使用"+"符號連接
css:css
h1 em {color:red;}
HTML:html
<html> <head> <style type="text/css"> h1 em {color:red;} </style> </head> <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html>
運行結果: spa
<h1>This is a <span><p><em>important</em></p></span> heading</h1>
運行結果:code
下面設置h1的子元素strong標籤的內容爲紅色htm
第二個h1中,由於strong的父元素不是h1,而是em,因此css中的設置不會對它起做用blog
css:get
h1 > strong {color:red;}
HTML:it
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 > strong {color:red;} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
運行結果: class
h1和p擁有相同的父元素body,相鄰兄弟選擇器須要緊挨着,只會適用於與h1相鄰的p標籤的內容import
css:
h1 + p {margin-top:50px;}
HTML:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 + p {margin-top:50px;} </style> </head> <body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body> </html>
運行結果:
請記住,用一個結合符只能選擇兩個相鄰兄弟中的第二個元素
因此h1+p只會對第一個p做用,再以下面的例子:
只會對兩個列表的第二個及後面的li起做用,對第一個li不會起做用
css:
li + li {font-weight:bold;}
HTML:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> li + li {font-weight:bold;} </style> </head> <body> <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> </body> </html>
運行結果:
例程來源: