html+css初级篇

最新推荐文章于 2024-09-10 14:15:01 发布

内推锦鲤

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量124

点赞数

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

本文链接：https://blog.csdn.net/weixin_36926779/article/details/79237746

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<!-- 父子关系选择器 -->
	<div>
		<span>abc</span>
	</div>
	<span>bcd</span>

	<div>
		<div class="box">
			<em id="wrapper">efg</em>
		</div>
	</div>
	<div>
		<em>jakdjf</em>
		<span>
			<em>2344</em>
		</span>
	</div>
	<!-- 直接子元素选择器 -->
	<h1>
		<div>hello world!</div>
		<span>
			<div>hi!</div>
		</span>		
	</h1>
	<!-- 从右向左匹配 -->
	<section>
		<div>
			<p>
				<a href=""></a> href="">
					<span></span>
				</a>
			</p>
			<ul>
				<li>
					<a href="">
						<span>
							<em>1</em>
						</span>
					</a>
					<p></p>
				</li>
				<li></li>
			</ul>

		</div>
		

		<a href="">
			<p>
				<em>2</em>
			</p>
			<div></div>
		</a>
	</section>
	<!-- 并列选择器 -->
	<div>1</div>
	<div class="demo">2</div>
	<p class="demo">3</p>

	<div class="wrapper">
		<div class="content">
			<em class="box" id="only">1</em>
		</div>
	</div>	

	<!-- 权重计算 -->
	<div class="classDiv" id="idDiv">
		<p class="classP" id="idP">1
		</p>
	</div>
	<!-- 分组选择器 -->
	<!-- 共用一个代码块 -->
	<em>1</em>
	<strong>2</strong>
	<span>3</span>
</body>
</html>

/*父子选择器/派生选择器*/
/*在div标签下的span才是红色*/
/*只要父子关系成立就可*/
div span{
	background-color: red;
}
div .box #wrapper{
	background-color: green;
}
div em{
	background-color: yellow;
}

/*直接子元素选择器 >*/
h1 > div{
	background-color: blue;
}
section div ul li a em{
	background-color: #fcc;
}

/*并列选择器*/
div.demo{
	background-color: #f40;
}
/*权重计算*/
/*100+1*/
#idDiv p{
	background-color: red;
}
/*10+10*/
.classDiv .classP{
	background-color: green;
}
/*10+10+100*/
.classDiv .classP#idP{
	background-color: yellow;
}
/*分组选择器*/
/*共用一个代码块*/
em, strong, span{
	background-color: red;
}
em{
	width: 100px;
}
strong{
	height: 100px;
}