來看一個後代選取器的最簡單寫法，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>
執行效果：
樣本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='sidebar'><a href ='#'>我是連結1<a/></p><p class='maincontent'><a href ='#'>我是連結1<a/></p></body></html>
執行效果
一點說明：
XML/HTML Code複製內容到剪貼簿
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
