- 后代選擇器比子選擇器的范圍大,包含子選擇器,且包含子選擇器的“子孫”選擇器,后代選擇器使用"空格"符號間隔選擇器
- 子選擇器:子選擇器只是父選擇器的一級子元素,使用">"符號鏈接選擇器
- 相鄰兄弟選擇器,是擁有相同父元素,且兩個元素相鄰,使用"+"符號鏈接
1. 后代選擇器
- 比如如下html代碼,em是h1的后代元素,如下css樣式這樣寫,只會影響h1中的em標簽的內容變為紅色,不會影響p中em的內容
css:
h1 em {color:red;}
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>
運行結果:
- h1 em的寫法適用於h1中的的所有em,且不管em嵌套多少層都會適用
<h1>This is a <span><p><em>important</em></p></span> heading</h1>
運行結果:
2. 子選擇器
下面設置h1的子元素strong標簽的內容為紅色
第二個h1中,因為strong的父元素不是h1,而是em,所以css中的設置不會對它起作用
css:
h1 > strong {color:red;}
HTML:
<!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>
運行結果:
3. 相鄰兄弟選擇器
h1和p擁有相同的父元素body,相鄰兄弟選擇器需要緊挨着,只會適用於與h1相鄰的p標簽的內容
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>
運行結果:
例程來源: