亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

基礎(chǔ) 子元素選擇器只能一級(jí)一級(jí)向下尋找，不能跨越

 HTML代碼：

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

CSS代碼：

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

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

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

示例1：

XML/HTML Code復(fù)制內(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復(fù)制內(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中，會(huì)根據(jù)選擇器的特殊性來(lái)決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先
    2016-09-11

  • CSS 選擇器演示

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

  • 全面了解css 屬性選擇器

    下面小編就為大家?guī)?lái)一篇全面了解css 屬性選擇器。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-20

  • CSS的相鄰兄弟選擇器用法簡(jiǎn)單講解

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

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

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

最新評(píng)論