搜尋

首頁  >  文章  >  web前端  >  CSS的後代選擇器基礎使用範例詳解

CSS的後代選擇器基礎使用範例詳解

高洛峰
高洛峰原創
2017-03-07 14:43:392077瀏覽

基礎

來看一個後代選擇器的最簡單寫法，strong標籤屬於p標籤的後代，i標籤屬於strong標籤後代：
HTML程式碼：

<p>
    my name is <strong>li<i>daze</i></strong>, hahah.   
</p>

CSS程式碼：

p strong {   
    font-size: 30px;   
}   
p i {   
    font-size: 40px;   
}

1、在後位選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。
2、選擇器之間的空格是一種結合符。
3、後代選擇器，後代的層次間隔可以是無限的，注意與子元素選擇器的區別。

範例1

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}     
</style>
</head>

<body>
<ul>
  <li>List item 1     
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3     
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

執行效果：
CSS的後代選擇器基礎使用範例詳解

範例2 

<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}     
p.maincontent {width:100px;height:100px;background:yellow;}     

p.sidebar a:link {color:white;}     
p.maincontent a:link {color:red;}     
</style>
</head>
<body>
<p class=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>

執行效果
CSS的後代選擇器基礎使用範例詳解

一點說明：


##XML/ HTML Code複製內容到剪貼簿

  1. a:link {color: #FF0000}         /* 未存取的連結* /     

  2. a:visited {color: #00FF00}  /* 已存取的連結 */     

  3. a:hover }    /* 滑鼠移動至連結上 */     

  4. a:active {color: #0000FF}   /* 所選取的連結 */#1  

    #更多CSS的後代選擇器基礎使用範例詳解相關文章請關注PHP中文網！

    5. #
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS的子元素選擇器用法詳細介紹下一篇：CSS的子元素選擇器用法詳細介紹

相關文章

看更多