高级选择器前端

最新推荐文章于 2023-06-28 09:44:14 发布

weixin_43268298

最新推荐文章于 2023-06-28 09:44:14 发布

阅读量86

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43268298/article/details/108358995

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*并集选择器，选择器通过逗号分隔*/
		h1,div{
		color: gold;	
		}
		/*后代选择器
		 影响所有符合选择器删选的后代*/
		/*div p{
			color: red;
		}*/
		/*子元素选择器
		 * 只影响子元素，对孙元素不起作用
		 */
		#div1>p{
			color:blue;
		}
		h1[id="title1"]{
			color:green;
					}
		</style>
		
	</head>
	<body>
		
		<h1 id="title1">高级选择器</h1>
		
		<h1>高级选择器2</h1>
		
		<div id="div1">
			<p>我是第一段</p>
			<p>我是第二段</p>
			<p>我是第三段</p>
			<p>我是第四段</p>
			<div id="div2">
				<p>我是第五段</p>
			</div>
		</div >
		
		<p> 我是divp外的段落</p>
	</body>
</html>