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