css多元选择器

CSS选择器详解

最新推荐文章于 2023-03-29 10:40:09 发布

拙劣。

最新推荐文章于 2023-03-29 10:40:09 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

文章标签： css选择器

本文链接：https://blog.youkuaiyun.com/weixin_44017414/article/details/84982184

本文深入解析了CSS中各种选择器的使用方法，包括基础选择器、后代选择器、子选择器和相邻选择器等，通过具体示例展示了不同选择器如何应用于HTML元素，帮助读者掌握CSS样式控制的精髓。

基础与组合选择器：多元后代子相邻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				color: red;padding: 0px;
			}
			/*p{
				color: royalblue;*/
			}
			.a{
				color: aquamarine;
			}
			#b{
				color: chartreuse
			}
			span,p{
				/*color: darkblue;*/
			}
			div p{
				color: black;text-decoration: underline;
			}
			.div>p{
				color: white;background: black;
			}
			/*#box>p{
				background: red;color: blue;
			}*/
			h1+p{
				font-size: 50px;color: gray;
			}
			
			
			
		</style>
	</head>
	<body>
		<b>我是b标签</b>
		<p>我是p标签</p>
		<p class="a">我是p标签</p>
		<p id="b">我是p标签</p>
		<span>我是span标签</span>
		<h1>我是h1标签</h1>
		<p>我是p标签</p>
		
		<div id="box">
			<ul>
				<li>我是div-ul-li</li>
				<span>我是div-ul-span</span>
			</ul>
			<div class="div" id="box">
				我是div-div
				<p>我是div-div-p</p>
			</div>
			<h1>我是div-h1</h1>
			<p>我是div-p</p>	
		</div>

	</body>
</html>

运行效果如下：