|
相比后代选择器,子元素选择器只能向下一步步寻找最临近的子元素,局限性更大些,这里我们就来举例讲解CSS的子元素选择器用法,需要的朋友可以参考下
基础 子元素选择器只能一级一级向下寻找，不能跨越
HTML代码：
XML/HTML Code复制内容到剪贴板
- <p>
- this is my <strong><i>w</i>eb</strong> page.
- </p>
CSS代码：
CSS Code复制内容到剪贴板
- p>strong { color: purple; } p>strong>i { font-size: 50px; }
1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
2、子元素选择器使用大于号">"做为连接符。
示例1：
XML/HTML Code复制内容到剪贴板
- <html>
-
- <head>
- <style type="text/css">
- h1 > strong {
- color: red;
- }
- </style>
- </head>
-
- <body>
- <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
- <h1>This is <em>really <strong>very</strong></em> important.</h1>
- </body>
-
- </html>
2016712114001445.png
示例2
XML/HTML Code复制内容到剪贴板
- <html>
-
- <head>
- <style type="text/css">
- table.company td > p {
- color: red;
- }
- </style>
- </head>
-
- <body>
- <table class='company'>
- <tr>
- <td>
- <p>hello</p>
- </td>
- </tr>
- </table>
- <table>
- <tr>
- <td>
- <p>world</p>
- </td>
- </tr>
- </table>
- </body>
-
- </html>
2016712114047005.png
| 
发表于 2016-7-12 11:36:32
