一、元素之间的关系

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Css之选择器</title><styletype="text/css">/***为div中的审判元素设置背景为绿色*后代选择器*作用：选中指定元素的指定后代元素*语法：祖先元素后代元素{}*/divspan{background-color:green;}</style></head><body><!--元素之间的关系时间：2016-12-04描述：父元素：直接包含子元素的元素；子元素：直接被父元素包含的元素；祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素--><divid="d1"><span>我是div标签中的span</span><p><span>我是P标签中的span</span></p></div><span>我是body标签中的审判</span></body></html>


二、后代选择器

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Css之选择器</title><styletype="text/css">/***为div中的审判元素设置背景为绿色*后代选择器*作用：选中指定元素的指定后代元素*语法：祖先元素后代元素{}*/divspan{background-color:green;}</style></head><body><!--元素之间的关系时间：2016-12-04描述：父元素：直接包含子元素的元素；子元素：直接被父元素包含的元素；祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素--><divid="d1"><span>我是div标签中的span</span><p><span>我是P标签中的span</span></p></div><span>我是body标签中的审判</span></body></html>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Css之选择器</title><styletype="text/css">/***为div中的审判元素设置背景为绿色*后代选择器*作用：选中指定元素的指定后代元素*语法：祖先元素后代元素{}*/divspan{background-color:green;}/***选中id为d1的div中的p元素中的span元素*/#d1pspan{background:deepskyblue;}</style></head><body><!--元素之间的关系时间：2016-12-04描述：父元素：直接包含子元素的元素；子元素：直接被父元素包含的元素；祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素--><divid="d1"><span>我是div标签中的span</span><p><span>我是P标签中的span</span></p></div><span>我是body标签中的审判</span></body></html>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Css之选择器</title><styletype="text/css">/***为div中的审判元素设置背景为绿色*后代选择器*作用：选中指定元素的指定后代元素*语法：祖先元素后代元素{}*/divspan{background-color:green;}/***选中id为d1的div中的p元素中的span元素*/#d1pspan{background:deepskyblue;}/***选中div的子元素span元素设置一个背景颜色*子元素选择器*作用：在给定的父元素下匹配所有的子元素*语法：父元素>子元素*/div>span{font-size:25px;}</style></head><body><!--元素之间的关系时间：2016-12-04描述：父元素：直接包含子元素的元素；子元素：直接被父元素包含的元素；祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素--><divid="d1"><span>我是div标签中的span</span><p><span>我是P标签中的span</span></p></div><span>我是body标签中的审判</span></body></html>