css中的text-align和子孙选择器

最新推荐文章于 2022-09-12 18:23:40 发布

xvzhengyang

最新推荐文章于 2022-09-12 18:23:40 发布

阅读量428

点赞数

分类专栏： html 前端 css 文章标签： css text-align与子孙选择器

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86441415

版权

前端同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

子孙选择器,如下图,h1的字体颜色为红色,但是可以通过是使用子孙选择器,改变子孙元素的字体颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>textalign与子孙选择器</title>
		<!-- text-align:不仅仅是影响文本,实际上会对块元素中的所有内联内容对齐,包括图片;
		 另外需要记住,text-align属性只能用在块元素身上,对内联元素是没有影响的-->
		 
		 <!-- 子孙选择器 -->
		 <style type="text/css">
		 	h1,h2{
				color: red;
			}
			/* 不会影响其他页面 */
			#son h1{
				color: black;
			}
		 </style>
	</head>
	<body>
		<div style="text-align: center;">
			<!-- 此处图片居中显示 -->
			<img src="../HelloHBuilder/img/HBuilder.png" >
			
		</div>
		<!-- 007e7e的颜色 -->
		<h1>这个是标题栏</h1>
		<div id="son">
			<h1>这个是子孙选择器的标题栏</h1>
			<!-- 黑色 -->
		</div>
	</body>
</html>