网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )

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

 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>  

举例讲解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的子元素选择器用法

上一篇：对行内元素和块级元素的一些认识
下一篇：全面了解link与import方式的区别
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？

友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap