当前位置：主页 > 查看内容

举例讲解CSS的子元素选择器用法

发布时间：2021-09-26 00:00| 有 位朋友查看

简介：基础 子元素选择器只能一级一级向下寻找，不能跨越 HTML代码： XML/HTML Code 复制内容到剪贴板 p thisismy strong i w / i eb / strong page. / p CSS代码： CSS Code 复制内容到剪贴板 pstrong{ color : purple ;}pstrongi{ font-size : 50px ;} 1、与后代……

基础 子元素选择器只能一级一级向下寻找，不能跨越

 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 { color: purple; } p>strong>i { font-size: 50px; }   

1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

2、子元素选择器使用大于号">"做为连接符。

示例1：

XML/HTML Code复制内容到剪贴板
  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复制内容到剪贴板
  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)


原文链接：https://m.jb51.net/css/476573.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：input file上传文件样式支持html5的浏览器解决方案 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐