目标选择器

最新推荐文章于 2022-09-22 18:11:46 发布

加油，铁子！

最新推荐文章于 2022-09-22 18:11:46 发布

阅读量454

点赞数 1

分类专栏： web前端 css HTML 文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119487937

版权

本文详细介绍了CSS中的子代选择器（div>p）、兄弟选择器（div+p）和同级选择器（div~p），以及属性选择器的使用方法。这些选择器帮助开发者精确地定位和样式化页面元素，实现更精细的布局控制。

摘要由CSDN通过智能技术生成

子代选择器 div>p

兄弟选择器 div+p

同级选择器 div~p

属性选择器 [属性名]

子代选择器 div>p

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>目标选择器</title>
		<style type="text/css">
			.first>li{
				/* 子代选择器 */
				color: gold;
			}
		</style>
	</head>
	<body>
		<ul class="first">
			<h1>item</h1>
			<li>item1</li>
			<li>item2</li>
			<div>
				<ul>
					<li>second-item1</li>
					<li>second-item2</li>
					<li>second-item3</li>
					<li>second-item4</li>
					<li>second-item5</li>
				</ul>
			</div>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
		</ul>
	</body>
</html>

兄弟选择器 div+p

针对的是向下寻找