HTML选择器

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			div{
				color: #1E99FF;
			}
			span{
				color: #483D8B;
			}
			/* 使用空格来标识为后代选择器,其实是缩小了选择器的查找范围而已 */
			
			div span{
				color: red;
			}
		
		
		</style>
	</head>
	<body>
		<!-- 在包裹关系中,样式有继承关系 -->
		<div>
			
			div中的不带标签的内容
			<span>后代选择器,注意很常用</span>
			
		</div>
		<!-- 所有的选择器默认是从body标签中进行查找元素的 -->
		<P>
			<span>p标签中的span标签</span>
		</P>
		
	</body>
</html>

后代选择器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			div{
				color: #1E99FF;
			}
			span{
				color: #483D8B;
			}
			/* 使用空格来标识为后代选择器,其实是缩小了选择器的查找范围而已 */
			
			div span{
				color: red;
			}
		
		
		</style>
	</head>
	<body>
		<!-- 在包裹关系中,样式有继承关系 -->
		<div>
			
			div中的不带标签的内容
			<span>后代选择器,注意很常用</span>
			
		</div>
		<!-- 所有的选择器默认是从body标签中进行查找元素的 -->
		<P>
			<span>p标签中的span标签</span>
		</P>
		
	</body>
</html>

基本选择器(ID选择器、Class类选择器、标签选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style>
			
			/* id选择器:在标签上添加了一个id属性,作为唯一表示,通常不允许重复 */
			
			#p-id{
				color: #483D8B;
			}
			
			
			/* 代码从上往下进行加载,针对选择器而言依然生效,前提是相同的选择器类型才生效 */
			/* 类选择器:在标签上添加了一个class属性,不论是什么标签,只要有class属性,对应的样式就可以生效 */
			.div-cls{
				color: red;
			}
			.p-cls{color: green;}
			
			.h4-cls{
				color: blue;
			}
			
			
			/* 标签选择器是根据标签名来的,会选中当前页面中所有该标签 */
/* 			div{
				color: #00BFFF;
				
			}
			p{
				color: #483D8B;
			}
			
			h4{
				color: #1E90FF;
			} */
			
		</style>
	</head>
	<body>
		<div class="div-cls">昨日头条:国家公祭日</div>
		<div class="ps-cls" id="p-id">昨日头条:国家公祭日</div>
		<div class="div-cls">昨日头条:国家公祭日</div>
		<p class="p-cls">抗议头条:郑州二七万达参与检测的都是阴性</p>
		<h4 class="h4-cls">学习头条:第三个三个三个三个三个</h4>
	</body>
</html>

伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style type="text/css">
			/* 伪类选择器:ntf-of-type(n) */
			/* 基数的颜色改变 */
		/* 	p:nth-of-type(2n+1){
				color: #1E90FF;
			}
			/* 偶数的颜色 */
			/* p:nth-of-type(2n){
				color:#483D8B;
				font-size: 18px;
			} */
			 */
			span:nth-of-type(2n+1){
				color: #483D8B;
				font-size: 18px;
			}
			span:nth-of-type(2){
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<p>
			<span>百度新闻</span>
			<span>新浪官网</span>
			<span>云和官网</span>
			<span>腾讯官文</span>
			<span>人人编程官网</span>
		</p>
	</body>
</html>

组合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组合选择器</title>
		<style>
			
		/* 	div span{
				color: #00BFFF;
			}
			p span{
				color: #00BFFF;
			} */
			/* 逗号就代表前后的元素是同等级的 */
			div span,p span{
				color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<div>
			div中的不带标签的内容
			<span>组合选择器,注意很常用</span>
		</div>
		<p>
			
			<span>p标签中的span标签</span>
			
		</p>
		
		<h4>
			<span>h4标签中的span标签</span>
			
		</h4>
	</body>
</html>

选择器优先级:d选择器>类选择器>标签选择器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值