HTML选择器

最新推荐文章于 2023-03-28 23:15:23 发布

我们一起走过的岁月

最新推荐文章于 2023-03-28 23:15:23 发布

阅读量236

点赞数

文章标签： java

本文链接：https://blog.csdn.net/HeDashuaithan/article/details/112295394

版权

后代选择器

<!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选择器>类选择器>标签选择器

我们一起走过的岁月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML选择器

后代选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>后代选择器</title> <style type="text/css"> div{ color: #1E99FF; } span{ color: #483D8B; } /* 使用空格来标识为后代选择器，其实是缩小了选择器的查找范围而已
复制链接

扫一扫