元素选择器(二)_test2变成绿色用元素指定选择器来实现-CSDN博客

本文链接：https://blog.csdn.net/jdbfvhxx/article/details/97616371

元素之间的关系

   父元素:直接包含子元素的元素
   子元素:直接被父元素包含的元素
   祖先元素:直接或间接被祖先包含的元素,子元素也是后代元素
   后代元素:拥有相同父类的元素叫兄弟元素

后代元素选择器
作用:
选中指定元素的指定后代元素
语法:
祖先元素后代元素{}
子元素选择器
作用:
选中指定的父元素为指定的子元素
语法:
父元素>子元素
IE6及以下浏览器不支持子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 为后代元素的span设置一个颜色为绿色的
			 * 后代元素选择器
			 * 	作用:
			 * 		选中指定元素的指定后代元素
			 * 	语法
			 * 		祖先元素 后代元素{}
			 */
			div span{
				color: greenyellow;
			}
			#d1 span{
				color: red;
			}
			
			/*
			 * 选中id中的d1的div中的p元素的span元素
			 */
			#d2 p span{
				font-size: 30px;
			}
			
			/*
			 * 为div的子元素span设置一个背景颜色为yellow
			 * 子元素选择器
			 * 	作用:
			 * 		选中指定的父元素为指定的子元素
			 * 	语法:
			 * 		父元素>子元素
			 * IE6及以下浏览器不支持子元素选择器
			 */
			div>span{
				background-color: yellow;
			}
			
			
		</style>
	</head>
	
	<body>
		<!--
        	元素之间的关系
        		父元素:直接包含子元素的元素
        		子元素:直接被父元素包含的元素
        		祖先元素:直接或间接被祖先包含的元素,子元素也是后代元素
        		后代元素:拥有相同父类的元素叫兄弟元素
        		
        		
        -->
		<div id="d2">
			<span>我是div标签的span</span>
			<p><span>我是p标签的span</span></p>
		</div>
		<div id="d1">
			<span>我是d1中的span元素</span>
		</div>
	</body>
</html>