关于CSS中的选择器

最新推荐文章于 2022-07-06 21:27:50 发布

醉梦洛

最新推荐文章于 2022-07-06 21:27:50 发布

阅读量184

点赞数

分类专栏： HTML5 HTML

本文链接：https://blog.csdn.net/weixin_39921821/article/details/87808200

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

五大选择器：

1.元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			/*选择所有的div元素来做试验*/
			div{
				font-size: 30px;
				color: darkseagreen;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！12
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！13
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！14
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！15
		</div>
	</body>
</html>

效果图：

2 类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div2{
				font-size: 30px;
				color: gray;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！12
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！13
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！14
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！15
		</div>
	</body>
</html>

效果图：

3.id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div5{
				font-size: 30px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div id="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！12
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！13
		</div>
		<div id="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！14
		</div>
		<div id="div5">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！15
		</div>
	</body>
</html>

效果图：

4.层级选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div p{
				font-size:30px;
				color:green;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div >
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！12
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！13
		</div>
		<div >
			<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！14
		    </p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！15
		</div>
	</body>
</html>

效果图：

5.属性选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div p{
				font-size:30px;
				color:green;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div >
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！12
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！13
		</div>
		<div >
			<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！14
		    </p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！15
		</div>
	</body>
</html>

效果图：

醉梦洛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于CSS中的选择器

五大选择器：1.元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;元素选择器&lt;/title&gt; &lt;style&gt; /*选择所有的div元素来做试验*/ div{ font-si
复制链接

扫一扫