溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS中如何使用后代選擇器

發(fā)布時間：2021-06-25 15:56:51 來源：億速云 閱讀：178 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了CSS中如何使用后代選擇器，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

基礎(chǔ)
來看一個后代選擇器的最簡單寫法，strong標(biāo)簽屬于p標(biāo)簽的后代，i標(biāo)簽屬于strong標(biāo)簽后代：
HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <p>  

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

  3. </p>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. p strong {   

  2.     font-size: 30px;   

  3. }   

  4. p i {   

  5.     font-size: 40px;   

  6. }  

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

示例1

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <html>     

  2. <head>     

  3. <style type="text/css">     

  4. ul em {color:red; font-weight:bold;}     

  5. </style>     

  6. </head>     

  7.      

  8. <body>     

  9. <ul>     

  10.   <li>List item 1     

  11.     <ol>     

  12.       <li>List item 1-1</li>     

  13.       <li>List item 1-2</li>     

  14.       <li>List item 1-3     

  15.         <ol>     

  16.           <li>List item 1-3-1</li>     

  17.           <li>List item <em>1-3-2</em></li>     

  18.           <li>List item 1-3-3</li>     

  19.         </ol>     

  20.       </li>     

  21.       <li>List item 1-4</li>     

  22.     </ol>     

  23.   </li>     

  24.   <li>List item 2</li>     

  25.   <li>List item 3</li>     

  26. </ul>     

  27. </body>     

  28. </html>    

執(zhí)行效果：
CSS中如何使用后代選擇器

示例2

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <html>     

  2. <head>     

  3. <style type="text/css">     

  4. div.sidebar {width:100px;height:100px;background:blue;}     

  5. div.maincontent {width:100px;height:100px;background:yellow;}     

  6.      

  7. div.sidebar a:link {color:white;}     

  8. div.maincontent a:link {color:red;}     

  9. </style>     

  10. </head>     

  11. <body>     

  12. <div class='sidebar'>     

  13. <a href ='#'>我是鏈接1<a/>     

  14. </div>     

  15.      

  16. <div class='maincontent'>     

  17. <a href ='#'>我是鏈接1<a/>     

  18. </div>     

  19. </body>     

  20. </html>    

執(zhí)行效果
CSS中如何使用后代選擇器

一點說明：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. a:link {color: #FF0000}         /* 未訪問的鏈接 */     

  2. a:visited {color: #00FF00}  /* 已訪問的鏈接 */     

  3. a:hover {color: #FF00FF}    /* 鼠標(biāo)移動到鏈接上 */     

  4. a:active {color: #0000FF}   /* 選定的鏈接 */    

上述內(nèi)容就是CSS中如何使用后代選擇器，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手