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

互联网
炎热的夏天过去了，凉爽的秋天来了。它是一个收获的季节，也是各种水果最多的时候，红艳艳的苹果扒开绿叶往外瞧；小红灯笼似的枣子挂满枝头；像紫玛瑙的葡萄一串串地挂在葡萄架下，真迷人呀！

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

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <p>
  2. thisismy<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>
  3. <head>
  4. <styletype="text/css">
  5. h1>strong{
  6. color:red;
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <h1>Thisis<strong>very</strong><strong>very</strong>important.</h1>
  13. <h1>Thisis<em>really<strong>very</strong></em>important.</h1>
  14. </body>
  16. </html>

示例2

XML/HTML Code复制内容到剪贴板
  1. <html>
  3. <head>
  4. <styletype="text/css">
  5. table.companytd>p{
  6. color:red;
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <tableclass='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>
  28. </html>

以上就是举例讲解CSS的子元素选择器用法。当你放下面子对老婆好的的时候，说明你已经成为一个真正的男人了。当你给足老婆面子的时候，说明你已经成功了。当你老婆什么时候都会给你面子的时候，说明你已经是人物了。当你还停留在那里自私、耍横，啥也给不了老婆，只知道以自我为中心的时候，说明你这辈子也就这样了。更多关于举例讲解CSS的子元素选择器用法请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
CSS复合选择器的具体如何使用方法
CSS3 新增选择器的实例
CSS 样式的如何使用方式、选择器
css3 伪类选择器快速复习小结
如何使用CSS属性选择器来拼接HTML的DNA的方法