前端面试复习之CSS：选择器

最新推荐文章于 2023-12-23 21:11:00 发布

炒米粉真好吃

最新推荐文章于 2023-12-23 21:11:00 发布

阅读量592

点赞数

分类专栏： CSS 文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/weixin_39342847/article/details/106029951

版权

本文复习了前端开发中常见的CSS选择器，包括标签选择器、ID选择器、Class选择器、后代选择器、子元素选择器和伪类选择器。通过实例解析了它们的用法和区别，如`:hover`用于设置鼠标悬停时的样式，`:nth-child()`选择器用于选取特定位置的元素。了解这些选择器有助于提升CSS的精准控制能力。

摘要由CSDN通过智能技术生成

写在前面

可能有人看了文章会说：“你写的这篇文章也太没有深度了，怎么可能会有面试问这么简单的内容啊blablabla……”
在这我想说，是有些简单的内容面试官可能确实不会问，但是这些知识却是你在前端开发中经常用到的，在这里复习一下当然是有益无害的，并且内容再简单，也有可能会有某个面试官提到。假设有一万个人看到了这篇文章，有一百个人对这篇文章有印象，有一个人在面试中被问到了我所写的内容，那这篇文章就是有意义的。

标签选择器

标签选择器就是用标签名称作为选择器。
举个栗子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
    
			width: 100px;
			height: 100px;
			background: brown;
		}
	</style>
</head>
<body>
	<div>我是div1</div>
	<br/>
	<div>我是div2</div>
	<br/>
	<p>我是个p</p>
</body>
</html>

在这里我们用标签选择器选择了所有的div标签，并给div添加了样式。
运行结果：
在这里插入图片描述

ID选择器

ID选择器是指给一个元素指定一个ID属性，这个ID是唯一的，不能重复的，并根据ID为元素添加样式。
ID选择器的使用方法是在元素的标签内添加ID属性，并在CSS中用’#’+ID的方式添加样式。
举个栗子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
    
			width: 100px;
			height: 100px;
			background: brown;
		}
		#div2{
    
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head>
<body>
	<div id="div1">我是div1</div>
	<br/>
	<div id="div2">我是div2</div>
	<br/>
	<p>我是个p</p>
</body>
</html>

在这个栗子中我们给两个div打上了不同的ID，然后通过ID选择器给他们添加了不同的样式。
运行结果：
在这里插入图片描述

Class选择器

Class选择器是指给一个或多个元素添加Class属性，并通过’.’+Class的方式为含有相应Class的元素添加样式，与ID选择器不同的是，你可以给多个不同的元素添加相同的Class以实现批量控制元素的样式。
举个栗子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.aaa{
    
			width: 100px;
			height: 100px;

最低0.47元/天解锁文章