Web开发基础-CSS-03

最新推荐文章于 2024-05-11 09:00:00 发布

Coder_Boy_

最新推荐文章于 2024-05-11 09:00:00 发布

阅读量169

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/80725656

版权

Web开发专栏收录该内容

108 篇文章 0 订阅

订阅专栏

CSS常用-选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>选择器</title>
		<style type="text/css">
			/* 1、类选择器：
				根据class选择一组元素 */
			.female {
				color:pink;
			}
			/* 2.ID选择器：
			  根据id选择唯一的元素。 */
			#p4 {
				color:red;
			}
			/* 3.选择器组：
			  选中一组选择器中，每个选择器所
			  对应的目标的并集（和）。 */
			 .female,#p4 {
			 	font-family:
			 		"微软雅黑","文泉驿正黑","黑体";
			 }
			/* 4.派生选择器:
			 	根据元素的层次关系选择某元素的子元素。 */
			 /* 4.1后代选择器：选择满足条件的所有子孙。 */
			 ol li {
			 	color:blue;
			 }
			 /* 4.2子元素选择器：选择满足条件的所有儿子。 */
			 ol>li {
			 	color:green;
			 }
		</style>
	</head>
	<body>
		<h1 class="female">苍老师</h1>
		<h2>范老师</h2>
		<h3 class="female">王老师</h3>
		<p>苍老师啊苍老师</p>
		<p>范老师啊范老师</p>
		<p>王老师啊王老师</p>
		<p id="p4">瞧你们这点破事</p>
		<ol>
			<li>
				河北省
				<ul>
					<li>石家庄</li>
					<li>秦皇岛</li>
					<li>张家口</li>
				</ul>
			</li>
			<li>
				河南省
				<ul>
					<li>郑州</li>
					<li>洛阳</li>
					<li>安阳</li>
				</ul>
			</li>
		</ol>
	</body>
</html>

最终页面效果：