选择器的作用和怎么用

最新推荐文章于 2022-10-17 21:42:47 发布

zzh_3303097051

最新推荐文章于 2022-10-17 21:42:47 发布

阅读量1.7k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/zzh_3303097051/article/details/110404813

版权

创建一个html项目·，用一个div标签上面写入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
		郑州高新区	
		</div>
	</body>
</html>

运行后·

可以改变字体间的间隔，如用style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="letter-spacing: 12px">
		郑州高新区	
		</div>
	</body>
</html>

运行后

也可以用选择器来实现这一效果，如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{/*标签选择器*/
			letter-spacing: 12px;
		}
	</style>
	<body>
		<div>
		郑州高新区	
		</div>
	</body>
</html>

把div标签内的style内容删掉，改为在body上建一个style标签，再在其中加入

div{
letter-spacing: 12px;
}

可以可以实线这样的效果，这就是选择器的作用，用选择器可以便于代码的维护。

上面只是一种方法，下面分别介绍其他两种

id选择器

输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#ddd{
			letter-spacing: 12px;
		}
	</style>
	<body>
		<div id="ddd">
		郑州高新区	
		</div>
	</body>
</html>

如上代码，在div标签中写入id=“xxx"（必须以字母开头，长度不限），以上代码为例子，写入id=”ddd"，再在style中写

# ddd{

letter-spacing: 12px;
}

运行后得到同样效果，id必须配#才起作用。

还有一种叫类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.ddd{
			letter-spacing: 12px;
		}
	</style>
	<body>
		<div class="ddd">
		郑州高新区	
		</div>
	</body>
</html>

在div标签中写入class=“xxx"（必须以字母开头，长度不限），以上代码为例子，写入class=”ddd"，再在style中写

.ddd{
letter-spacing: 12px;
}

class必须与.搭配才起作用。这就是这三种选择器了，选择器可以在标签外改变body中各种标签内东西的形式。一个选择器可以改变body中同样标签的形式，如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.ddd{
			letter-spacing: 12px;
		}
	</style>
	<body>
		<div class="ddd">
		郑州高新区	
		</div>
		<div class="ddd">
			郑州
		</div>
	</body>
</html>

运行后

两个div标签中的内容都被改了形式，这是因为选择器只看标签，不去分辨到有多少个div标签，他将所以有的div标签中的内容都做了改变。

好了，创作不易，点个赞鼓励一下吧。

zzh_3303097051

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
选择器的作用和怎么用

创建一个html项目·，用一个div标签上面写入<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> 郑州高新区 </div> </body></html>运行后·可以改变字体间的间隔，如.
复制链接

扫一扫