关于X>Y和X Y的区别请看下面的html实例：

最新推荐文章于 2023-01-14 09:19:20 发布

原创最新推荐文章于 2023-01-14 09:19:20 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

3 篇文章

订阅专栏

本文深入探讨了CSS选择器中#container > ul和div ul的使用区别，通过实例展示了两者如何匹配不同层级的元素。

选择器#container > ul只会匹配到第一个UL，也就是#container的子元素UL，而不是li里面的ul，但是div ul则可以匹配到所有DIV里面的ul。

测试

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>CSS Selectors</title>
	<style>
	#container > ul {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>

	<div id="container">
	<ul>
	<li> List Item
	<ul>
	<li> Child </li>
	</ul>
	</li>
	<li> List Item </li>
	<li> List Item </li>
	<li> List Item </li>
	</ul>

	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
	</div>

	</body>
	</html>