<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素和后代元素选择器</title> <style type="text/css"> /* 后代元素选择器 作用: 选中指定元素的指定后代元素 语法: 祖先元素 后代元素{} */ #d1 span{ color: #7FFF00; } #d1 p span{ color: #8A2BE2; } /* 子元素选择器 作用: 选中指定父元素的指定子元素 语法: 父元素 > 子元素 IE6及一下的浏览器不支持子元素选择器 */ div > span{ font-size: 40px; } </style> </head> <body> <!-- 元素之间的关系 父元素: 直接包含子元素的元素 子元素: 直接被父元素包含的元素 祖先元素: 直接或简介包含后代元素的元素,父元素也是祖先元素 后代元素: 直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素: 拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> 我是div标签 <span>我是div标签中的span元素</span> <p> <span> 我是p标签中的span标签 </span> </p> </div> <div> 我是body中的div <span>我是div中的span元素</span> </div> </body> </html>
浙公网安备 33010602011771号