HTML选择器

最新推荐文章于 2023-03-28 23:15:23 发布
最新推荐文章于 2023-03-28 23:15:23 发布
阅读量272 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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选择器>类选择器>标签选择器

我们一起走过的岁月
关注
HTML 选择器：提高网页开发效率的利器
a451319296的博客
05-12 4230
HTML 选择器是一种用于查找特定元素的语法，根据标签名、类名、ID 等属性来筛选出符合条件的元素。在开发过程中，灵活运用各种选择器可以帮助我们更加高效地操作页面元素。本文总结了常用的HTML选择器，并提供了相关使用案例和注意事项。通过熟练掌握这些选择器的使用方式，能够提高网页开发效率，并使代码更加规范化、易于维护。
HTML-并集选择器&兄弟选择器
在线学习web前端开发教程
12-17 2282
一、并集选择器 1.作用：给所有的选择器选中的标签设置属性。 2.格式： 选择器1，选择器2｛ 属性：值； ｝ 3.例如： .abc1,#abc2{ color:red; } .......省略代码....... <p class="abc1">并集1</p> <p id="abc2">并集...
HTML中的选择器
qq_44971038的博客
12-03 381
HTML中的选择器很多，我们这里仅选取一部分说明，主要说选择器的大类； 标签选择器 id选择器 类选择器 选择器会选择HTML文件中与选择器内容相匹配的元素添加相应的样式；看代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit...
前端 html5 省市区选择器
05-17
在前端开发中，HTML5 省市区选择器是一个常见的组件，用于用户输入他们的地理位置信息。这个组件通常包括三级联动的下拉菜单，用户依次选择省份、城市和区县，以便提供精确的地址信息。在网页应用中，这种组件常见于...
HTML5中常见的选择器
xiao1642016021的博客
05-24 2630
功能：选中想要添加样式的元素 注：选择器选择的是离大括号最近的元素，如果是那个元素，就添加，不是就不添加。 1、基础选择器 元素选择器 : 要选择的标记名 类选择器 ：设定的class ID选择器 ：设定的id 通配符 ：* 2、层次选择器 子级选择器 ：父元素>子元素 后代选择器 ：祖先元素 后代元素 兄弟选择器 ： 兄弟元素A+兄弟元素B——特点：AB之间不能有其他元素（相邻） 通用选择器 ： 兄弟元素A~兄弟元素B——特点：选择A之后所有的兄弟级元素B 否定选择器 :not()——小括号里是不
HTML-选择器
最新发布
m0_73595197的博客
03-28 3754
id属性是唯一的，class不唯一四种选择器的优先级：id>class>标签>通配符。
HTML颜色选择器实现代码
09-05
HTML颜色选择器实现代码需要的朋友可以参考下。
07.css学习-css选择器
weixin_30757793的博客
11-08 115
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/*选择器： 选择器的作用就是找到对应的数据进行样式化。 1.标签选择器： 就是找到所有指定的标签进行样式化。 格式： 标签名{ 样式1；样式2.... } 例子： div...
html选择器
weixin_51235620的博客
05-16 199
常用选择器 元素选择器：根据标签名来选择指定的元素，语法：标签名{} 例：p{} h1{} div{} p{ color: red; } h1{ color: blueviolet; } id选择器 作用：根据id属性值选中一个元素 语法：#id属性值{} 例：#box{} #red{ color:r
HTML中的标签选择器、类选择器、ID选择器等之间的区别
weixin_45819386的博客
09-07 6770
HTML中选择器 1. 标签选择器 一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。 例如： text-align:center; font-size:42px; color:#FF6600; 2.类选择器（class） 使用类选择器可以相同或不同的标签分类设置不同的样式。定义类选择器时，需要在类名称前面加一个“.”。 语法如下： .类名{样式属性：取值：样式取值：取值：…} 实例如下
餐厅HTML选择器练习教程
资源摘要信息:"HTML选择器练习（餐厅）" HTML选择器是HTML5标准中的一个重要组成部分，它允许开发者通过CSS（层叠样式表）来控制网页中元素的样式。在前端开发中，选择器的使用是基础且核心的技能之一，它直接影响...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值