CSS学习笔记（二）——CSS选择器

最新推荐文章于 2024-07-24 19:01:15 发布

ly_不忘初心

最新推荐文章于 2024-07-24 19:01:15 发布

阅读量143

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_45170058/article/details/101754092

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css选择器

1.标签选择器

标签选择器使用*来设计，对整体进行样式，影响范围大，尽量应用在层级选择器中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
	<style type="text/css">
		*{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="#">首页简介</a></li>
		<li><a href="#">首页简介</a></li>
		<li><a href="#">首页简介</a></li>		
	</ul>
</body>
</html>

网页效果：
在这里插入图片描述

2. id选择器

通过id名来选择元素，元素id名称不能重复，所以只能对应于一个元素。id一般给程序使用，所以不推荐使用id作为选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style type="text/css">
		#div1{
			font-size: 30px;
			color: #000;
		}
		#div2{
			font-size: 50px;
			color: #0f0;
		}
	</style>
</head>
<body>
	<div id="div1" >你好，html</div>
	<div id="div2" >你好，css</div>
</body>
</html>

网页效果：
在这里插入图片描述

3.类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

			<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类选择器</title>
	<style type="text/css">
		.div1{			
			font-size: 40px;
			color: #00f;
		}
		.div2{
			font-size: 40px;
			color: #0f0;
		}
	</style>
</head>
<body>
	<div class="div1" >你好，html</div>
	<div class="div2" >你好，css</div>
</body>
</html>

网页效果：
在这里插入图片描述

注意：id选择器的权重大于类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类选择器</title>
	<style type="text/css">
		#div1{
			color: #000;
		}
		#div2{
			color: #000;
		}
		.div1{			
			font-size: 40px;
			color: #00f;
		}
		.div2{
			font-size: 40px;
			color: #0f0;
		}
	</style>
</head>
<body>
	<div id="div1" class="div1" >你好，html</div>
	<div id="div2" class="div2" >你好，css</div>
</body>
</html>

网页效果：
在这里插入图片描述

4. 层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。层级选择器最好不要超过四层，会降低性能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			font-size: 20px;
			line-height: 30px;
			text-indent: 40px;
		}
		.box span{
			color:red;
			font-weight: bold;
		}
		.box em{
			font-style: normal;
			text-decoration: underline;
			font-weight: bold;
			color: pink;
		}
		.box .span02{
			font-style: normal;
			text-decoration: underline;			
			color: blue;
		}

	</style>
</head>
<body>
<!-- 层级选择器最好不要超过四层，超过则性能就不高了 -->
	<div class="box">
	大家记得今天6点之前交登记表，今天中午聚餐，大家把表交到xxx那里（学院303开门左手第二个位置)大家记得今天<span>6点之前</span>交登记表，今天中午聚餐，大家把表交到xxx那里（<span class="span02">学院303</span>开门左手第二个位置)大家记得今天6点之前交登记表，今天中午我们<em>聚餐</em>
	</div>

</body>
</html>

网页效果：
在这里插入图片描述

5. 组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器统一设计，简化编写。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组选择器</title>
	<style type="text/css">
		.box01,.box02,.box03{
			font-size: 20px;
			text-indent: 40px;
		}
		.box01{
			color: red;
		}
		.box02{			
			color: blue;
		}
		.box03{			
			color: gold;
		}
	</style>
</head>
<body>
	<!-- .box01+Tab键可以快速创建选择器 组选择器可以把相同的样式提取出来，方便编写-->
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
	<div class="box03">这是第三个div</div>
</body>
</html>

网页效果：
在这里插入图片描述

6.伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类和伪元素选择器</title>
	<style type="text/css">
		.link{
			font-size: 40px;
			text-decoration: none;
			color: red;
		}
		.link:hover{
			/*伪类：当鼠标放在csdn时的效果*/
			color: gold;
			font-weight: bold;
		}
		.box01,.box02{
			font-size: 20px;
		}
		.box01:before{
			/*伪元素可以在前面或者后面插入信息*/
			content: "文字信息：";
			color:red;
		}
		.box02:after{
			content: "文字结束";
			color:red;
		}
	</style>
</head>
<body>
	<!-- 一般用在链接,伪类表现在状态上 -->
	<a href="https://www.csdn.net" class="link">csdn</a>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
</body>
</html>

网页效果：
在这里插入图片描述
当鼠标放在csdn时：