溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

CSS的子元素選擇器用法介紹

發(fā)布時間:2021-08-10 18:13:55 來源:億速云 閱讀:154 作者:chen 欄目:web開發(fā)

本篇內容介紹了“CSS的子元素選擇器用法介紹”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

基礎 子元素選擇器只能一級一級向下尋找,不能跨越

 HTML代碼:

XML/HTML Code復制內容到剪貼板

  1. <p>  

  2.     this is my <strong><i>w</i>eb</strong> page.   

  3. </p>  

CSS代碼:

CSS Code復制內容到剪貼板

  1. p>strong { colorpurple; } p>strong>i { font-size50px; }   

1、與后代選擇器相比,子元素選擇器只能選擇作為某元素子元素的元素。

2、子元素選擇器使用大于號">"做為連接符。

示例1:

XML/HTML Code復制內容到剪貼板

  1. <html>  

  2.   

  3. <head>  

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

  5.         h2 > strong {   

  6.             color: red;   

  7.         }   

  8.     </style>  

  9. </head>  

  10.   

  11. <body>  

  12.     <h2>This is <strong>very</strong> <strong>very</strong> important.</h2>  

  13.     <h2>This is <em>really <strong>very</strong></em> important.</h2>  

  14. </body>  

  15.   

  16. </html>  

CSS的子元素選擇器用法介紹

示例2 

XML/HTML Code復制內容到剪貼板

  1. <html>  

  2.   

  3. <head>  

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

  5.         table.company td > p {   

  6.             color: red;   

  7.         }   

  8.     </style>  

  9. </head>  

  10.   

  11. <body>  

  12.     <table class='company'>  

  13.         <tr>  

  14.             <td>  

  15.                 <p>hello</p>  

  16.             </td>  

  17.         </tr>  

  18.     </table>  

  19.     <table>  

  20.         <tr>  

  21.             <td>  

  22.                 <p>world</p>  

  23.             </td>  

  24.         </tr>  

  25.     </table>  

  26. </body>  

  27.   

  28. </html>  

CSS的子元素選擇器用法介紹

“CSS的子元素選擇器用法介紹”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節(jié)

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

css
AI