html 类和id class和id选择器

最新推荐文章于 2023-05-13 17:43:56 发布

你好牛蛙

最新推荐文章于 2023-05-13 17:43:56 发布

阅读量725

点赞数 1

分类专栏： html+css笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_45821251/article/details/108801784

版权

html+css笔记专栏收录该内容

33 篇文章 2 订阅

订阅专栏

ID

id是用于给标签加入标记的
注：各个ID不能重复一个标签只能有一个ID

<p id="p1">哒哒哒哒哒哒</p>

这里为p标签加入叫做p1的ID

类(class)

当多个标签需要进行相同的操作的时候可以用class标记
类用于标记多个标签同一个类名可以标记多个标签一个元素可以有多个类名

		<p class="p2 p3">哒哒哒哒哒哒</p>
		<div class="p2">哒哒哒哒哒哒</div>
		<span class="p3">哒哒哒哒哒哒</span>

这里为p和span / p和div设置为同一个类 p同时有两个类名

选择器

class和id选择器 (css中的操作)

class选择器
即选定对应类名进行操作
语法
. 类名{} (前面一个.符号后面紧挨着类名)

		.p2{
				font-size: 20px;/*选择类的格式 .class*/
			}

为class=p2的标签设置样式

Id选择器
即选定对应的ID进行操作

		#p1{
				color: aquamarine;
				font-size: 10px;/*选择ID的格式#id*/
			}

为ID=p1的标签设置样式

并集选择器
可以理解为数学中的并集

#p1,.p2,.p3{
				background: palevioletred;
			}/*并集选择器 符合以上三个任意一个条件的都可选择*/

直接前面写上#p1(选择id=p1)，.p2(class=p2)，.p3(class=p3)选定这三个直接不管是类还是ID全一下子选上

交集选择器 (也叫复合选择器)
可以理解为数学中的交集
复合选择器即交集选择器选择同时满足过个条件的元素与并集选择器的写法差别在于并集中多个条件需要逗号隔开交集需要各个条件挨着

span.p4{
				font-size: 30px;
			}

这里是选定标签为span且类为p4的标签

无敌选择器

		*{
				background: darkgoldenrod;
			}/*  *号是选择全部的元素  */

加个*号表示选择全部标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			#p1{
				color: aquamarine;
				font-size: 10px;/*选择ID的格式#id*/
			}
			.p2{
				font-size: 20px;/*选择类的格式 .class*/
			}
			.p3{
				color: red;
			}
			#p1,.p2,.p3{
				background: palevioletred;
			}/*并集选择器 符合以上三个任意一个条件的都可选择*/
			*{
				background: darkgoldenrod;
			}/*  *号是选择全部的元素  */
			span.p4{
				font-size: 30px;
			}/*复合选择器即交集选择器 选择同时满足过个条件的元素  
			与并集选择器的写法差别在于 并集中多个条件需要逗号隔开 
			交集需要各个条件挨着*/
		</style>
	</head>
	<body>
		<p id="p1">哒哒哒哒哒哒</p>
		<p class="p2 p3">哒哒哒哒哒哒</p>
                                   <!--
                                   	一个元素可以有多个类名 
                                   -->
		<p class="p2">哒哒哒哒哒哒</p>
		<p class="p3">哒哒哒哒哒哒</p>
		<p>哒哒哒哒哒哒</p>
		<span id="2" class="p4">来嘛来嘛</span>
			<p class="p4">来了来了</p>
		</span>
	</body>
</html>