CSS 分组和嵌套

最新推荐文章于 2023-09-20 08:44:15 发布

冷月醉雪

最新推荐文章于 2023-09-20 08:44:15 发布

阅读量434

点赞数

分类专栏： CSS 实例 CSS 文章标签： CSS 分组嵌套实例

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81235116

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

组选择器

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			h1,h2,p {color:green;}
		</style>
	</head>
	<body>
		<h1>Hello World!</h1>
		<h2>Smaller heading!</h2>
		<p>This is a paragraph.</p>
	</body>
</html>

嵌套选择器

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p {
				color:blue;
				text-align:center;
			}
			
			.marked {
				background-color:red;
			}
			
			.marked p{
				color:white;
			}
			
			p.marked {
				text-decoration:underline;
			}
		</style>
	</head>
	<body>
		<p>这个段落是蓝色文本，居中对齐。</p>
		<div class="marked">
			<p>这个段落不是蓝色文本。</p>
		</div>
		
		<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>	
		<p class="marked">带下划线的 p 段落。</p>
	</body>
</html>

参考：https://www.yuque.com/docs/share/540890ba-54a9-49a0-a922-53266f0a2943