欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

舉例講解CSS的子元素選擇器用法

iteye   發(fā)布時間：2016-07-12 11:36:32   作者：huangqiqing123   我要評論
相比后代選擇器,子元素選擇器只能向下一步步尋找最臨近的子元素,局限性更大些,這里我們就來舉例講解CSS的子元素選擇器用法,需要的朋友可以參考下

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

 HTML代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <p>  
  2.     this is my <strong><i>w</i>eb</strong> page.   
  3. </p>  

CSS代碼：

CSS Code復制內(nèi)容到剪貼板
  1. p>strong { color: purple; } p>strong>i { font-size: 50px; }   

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

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

示例1：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <html>  
  2.   
  3. <head>  
  4.     <style type="text/css">  
  5.         h1 > strong {   
  6.             color: red;   
  7.         }   
  8.     </style>  
  9. </head>  
  10.   
  11. <body>  
  12.     <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>  
  13.     <h1>This is <em>really <strong>very</strong></em> important.</h1>  
  14. </body>  
  15.   
  16. </html>  

2016712114001445.png (527×143)

示例2 

XML/HTML Code復制內(nèi)容到剪貼板
  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>  

2016712114047005.png (255×156)

相關(guān)文章

  • CSS選擇器的權(quán)重與優(yōu)先規(guī)則分享

    在CSS中，會根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先
    2016-09-11

  • CSS 選擇器演示

    點擊左側(cè)列表中的選擇器，即可在右側(cè)中預覽到選擇器匹配到的內(nèi)容。如果沒有任何匹配，說明所使用的瀏覽器不支持該選擇器
    2016-08-30

  • 全面了解css 屬性選擇器

    下面小編就為大家?guī)硪黄媪私鈉ss 屬性選擇器。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-20

  • CSS的相鄰兄弟選擇器用法簡單講解

    對于有相同父元素的相鄰HTML元素查找便可以使用CSS的相鄰兄弟選擇器,這里我們就來看一下CSS的相鄰兄弟選擇器用法簡單講解:
    2016-07-12

  • CSS選擇器實現(xiàn)字段解析

    這篇文章主要介紹了CSS選擇器實現(xiàn)字段解析的相關(guān)資料,需要的朋友可以參考下
    2018-01-31

最新評論