<!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>