CSS实例【六】

最新推荐文章于 2023-08-03 15:31:32 发布

虾尾丸子

最新推荐文章于 2023-08-03 15:31:32 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/117998963

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		h1,h2,h3
		{
			color: blue;
		}
		p
		{
			color: #008000;
		}
		.marked
		{
			background-color: red;
			/* color:#008000 */
		}
		.marked p
		{
			color: white;
		}
		p.marked
		{
			text-decoration: underline;
		}
		</style>
	</head>
	<body>
		<h1>一、组选择器：</h1>
		<h1>标题</h1>
		<h2>标题</h2>
		<h3>标题</h3>
		<h4>标题：注意样式要在style标签里写</h4>
		
		<h1>二、嵌套选择器：</h1>
		<p>1、p的样式</p>
		<br>
		<div>
			<h4>2、没有使用marked类h4标签</h4>
			<p>2、没有使用marked类p标签</p>
		</div>
		<br>
		
		<div class="marked">
			<h4>3、使用了marked类的h4标签</h4>
			<p>3、使用了marked类的p标签</p>
		</div>
		<br>
		
		<p class="marked">4、使用了marked类的p标签</p>
		
		<p><b>
		p{ }: 为所有 p 元素指定一个样式。<br>
		.marked{ }: 为所有 class="marked" 的元素指定一个样式。<br>
		.marked p{ }: 为所有 class="marked" 元素'内'的 p 元素指定一个样式。<br>
		p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
		</b></p>
	</body>
</html>