Web学习笔记10：css初级篇-选择器（1）

「已注销」

已于 2022-06-02 14:48:41 修改

阅读量293

点赞数 2

分类专栏： Web学习笔记文章标签：前端 html css

于 2022-03-25 10:04:13 首次发布

本文链接：https://blog.csdn.net/Wanghs0716/article/details/123727171

版权

Web学习笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

上次，我们学习了如果在html中引入css。

今天，我们来开始学习css的选择器。

一、选择器的基本常识

css的选择器，是编程的基本。

css的选择器有很多，以下是一些简单的选择器：

1.id选择器

2.class选择器

3.标签选择器

4.通配符选择器

当然，还有一些复杂选择器。我们举几个例子：

1.父子选择器，派生选择器

2.直接子元素选择

3.并列选择器

4.分组选择器

5.伪类选择器

啊，真多！

我们来一点一点的学习吧！

二、一堆选择器——你怕了吗

1.id选择器

按照惯例，我们先来看一个案例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		#abcd{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="abcd">123</div>
</body>
</html>

我们的css就直接在html中写了，因为如果写在此外部文件的不会太方便。

我们可以观察到，在body函数中，有一个<div>标签，这个标签中有一个id="abcd"。

这个id，就是我们id选择器的关键。

当我们在一个标签中定义一个id=""的时候，就相当于已经引入了css了。这个时候，我们只需要在css中写入就可以了。

我们来看一下模板，更容易理解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>id选择器</title>
	<style type="text/css">
		#你想起的那个名称{
			css内容;
			css内容;
			css内容;
		}
	</style>
</head>
<body>
	<div id=你想起的名称></div>
</body>
</html>

你想起的名称就是可以自由发挥的，你可以起自己喜欢的名字（中文不行）。

接着，在css中，引入这个东西，就可以开始写了。我们看一下前头的例子，就成功地引入了id选择器了。

id选择器的特点比较鲜明：一个元素只能有一个 id 值，一个 id 只对应一个元素，也就是说，id值是对应的。

2.class选择器——选择器里的精英

class选择器是我们最常用的选择器了。class选择器和id选择器的共同点有很多。我们来看一下clas、选择器的引入方式吧。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		.abcd{
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="abcd">123</div>
</body>
</html>

我们可以看到，好像和id选择器没有什么区别。

能够看出来的，也只有在<div>中，我们把id变成了class，并将css中的#abcd变成了.abcd。

没错，就这么点的区别！

但是，和id选择器不同的是，id选择器是一对一的，一个id选择器只能对应一个标签，可是class、

选择器就不一样了：它可以一对多。

3.标签选择器

标签选择器就更简单多了。

我们在htnl中，可能会写到<html>，<div>，<ul>等标签。标签选择器就和这个有密切的关系。我们来看一下吧：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		div{
			background-color: green;
		}
	</style>
</head>
<body>
	<div>123</div>
</body>
</html>

这个选择器比其他的都更简单。

我们可以看到，在下头定义了div标签，上头直接div{}就可以了。

例如，我们想要写一个span的选择器，应该怎么写？

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		span{
			background-color: green;
		}
	</style>
</head>
<body>
	<span>123</span>
</body>
</html>

是不是非常的简单？

4.通配符选择器

这是我们今天讲的最后一个选择器。

“通”这个字，就表示所有的意思——通畅。所以，通配符选择器，就表示所有标签。

一般，我们用通配符选择器来做一些所有标签都应该去除的东西，例如padding和margin这类的。

我们先来看一下如何使用：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		*{
			background-color: red;
		}
	</style>
</head>
<body>
	<div>123</div>
	<span>234</span>
</body>
</html>

通配符选择器就是使用*{}就可以了。这代表对所有的标签进行处理。（包括html标签、body标签、head标签等）。