CSS系列以後代選擇器、子選擇器和相鄰兄弟選擇器

 

  • 後代選擇器比子選擇器的範圍大,包含子選擇器,且包含子選擇器的「子孫」選擇器,後代選擇器使用"空格"符號間隔選擇器
  • 子選擇器:子選擇器只是父選擇器的一級子元素,使用">"符號連接選擇器
  • 相鄰兄弟選擇器,是擁有相同父元素,且兩個元素相鄰,使用"+"符號連接

1. 後代選擇器

  • 好比以下html代碼,em是h1的後代元素,以下css樣式這樣寫,只會影響h1中的em標籤的內容變爲紅色,不會影響p中em的內容

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 em的寫法適用於h1中的的全部em,且無論em嵌套多少層都會適用
<h1>This is a <span><p><em>important</em></p></span> heading</h1>

 運行結果:code

2. 子選擇器

下面設置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

3. 相鄰兄弟選擇器

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>

 

運行結果: 

 

 例程來源:

相關文章
相關標籤/搜索