前端开发--css--选择器-优快云博客

本文深入探讨CSS样式设置及各类选择器的应用，包括通用、类、ID选择器，层次选择器，伪类如:hover，以及:before和:after伪元素。通过实例展示如何精确控制网页元素的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>css样式</title>
	<style type="text/css">

		*{
			font-size: 20px;
		}

		div{
			color: rgb(255,0,0);
		}

		p{
			color: #00ff00
		}

		#div1{
			color: blue;
		}

		.big{
			font-size: 30px;
		}

	</style>
</head>
<body>
	
	<div id='div1' class='big'>这是第一个div标签</div>
	<div >这是第二个div标签</div>
	<div>这是第三个div标签</div>
	<p>这也是一个p标签</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>css样式</title>
	<style type="text/css">
		.box1{
			font-size: 20px;
			line-height: 30px;
			text-indent: 40px;
		}

		.box1 span{
			color: red;
		}

		.box1 em{
			font-style: normal;
			text-decoration: underline;
			font-weight: bold;
			color: pink;
		}

	</style>
</head>
<body>
	
	<div class='box1'>层次选择器：通过<em>html</em>的dom元素间的层次关系获取<span>元素</span>，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。层次选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。</div>

	<div class='box2'>层次选择器：通过html的dom元素间的层次关系获取<span>元素</span>，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。层次选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。</div>
</body>
</html>

在这里插入图片描述
尽量不要超过四层，要不然性能就不高了。

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>css样式</title>
	<style type="text/css">
		.box1,.box2,.box3{
			font-size: 20px;
			text-indent: 40px;
		}

		.box1{
			color: red;
		}

		.box2{
			color: pink;
		}

		.box3{
			color: green;
		}

	</style>
</head>
<body>
	<div class='box1'>这是第一个div</div>
	<div class='box2'>这是第二个div</div>
	<div class='box3'>这是第三个div</div>
</body>
</html>

在这里插入图片描述

比如说一个链接，鼠标放上去之前绿色，放上去之后变成黄色

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>css样式</title>
	<style type="text/css">
		.link{
			font-size: 30px;
			text-decoration: none;
			color: green;
		}

		.link:hover{
			color: gold;
			font-weight: bold;
		}

		.box1,.box2{
			font-size: 20px;
		}

		.box1:before{
			content: '.';
			color:red;
		}

		.box2:after{
			content: '.';
			color: red;
		}

	</style>
</head>
<body>
	<a href="https://www.baidu.com" class='link'>百度搜索</a>
	<div class='box1'>这是第一个div</div>
	<div class='box2'>这是第二个div</div>
</body>
</html>

在这里插入图片描述
鼠标放上去：