<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 为div中的span设置绿色 后代元素选择器： 选中指定元素的指定后代元素 语法： 祖先元素 后代元素{} */ div span{ color: green; } /* 选中div元素中的p元素中的span元素 */ div p span{ font-size: 90px; } /* 子元素选择器 选中指定父元素的制定子元素 语法： 父元素>子元素 */ div>span{ background-color: lightcoral; } div>p>span{ background-color: lightseagreen; } /* 经常使用的是后代选择器 */ </style> </head> <body> <!-- 元素之间的关系 父元素：直接包含子元素的元素 注意：直接包含 子元素：直接被父元素包含的元素 父子元素是相对来说的 祖先元素：直接或简介包含后代元素的元素 后代元素：直接或间接被祖先元素包含的元素 兄弟元素：拥有相同父元素的元素 --> <div> <span>我是div元素中的span。</span> <p><span>我是p元素中的span。</span></p> </div> <span>我是body元素中的span。</span> </body> </html>