<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 为div中的span设置一个颜色为绿色 * 后代元素选择器 * - 作用： * - 选中指定元素的指定后代元素 * - 语法： * 祖先元素 后代元素{} */ #d1 span{ color: greenyellow; } /* * 选中id为d1的div中的p元素中的span元素 */ #d1 p span{ font-size: 50px; } /* * 为div的子元素span设置一个背景颜色为黄色 * 子元素选择器 * - 作用： * - 选中指定父元素的指定子元素 * - 语法： * 父元素 > 子元素 * * IE6及以下的浏览器不支持子元素选择器 */ div > span{ background-color: yellow; } </style> </head> <body> <!-- 元素之间的关系 父元素：直接包含子元素的元素 子元素：直接被父元素包含的元素 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 兄弟元素：拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> <div> <span>我是body中的span元素</span> </div> </body> </html>