css学习记录二：CSS选择器（一）：基础选择器

本文链接：https://blog.csdn.net/m0_48459838/article/details/120972808

css学习记录二：CSS选择器（一）：基础选择器

一、什么是选择器
二、选择器的分类
三、基础选择器

一、什么是选择器

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

二、选择器的分类

选择器分为基础选择器和复合选择器两个大类

三、基础选择器

1.标签选择器

<style>
div{
backgroun:red
}
</style>
<body>
<div></div>
<div></div>
</body>

标签选择器就是选择了这类标签，去掉了外面的<>。设置这类标签样式时，会影响所有的这类标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。

2. id选择器

<style>
#box{
backgroun:red
}
</style>
<body>
<div id="box"> </div>
<div id="box2"></div>
</body>

一个页面的id值只能是唯一的。不能有相同的id值。

3.类选择器

<style>
.box{
backgroun:red
}
</style>
<body>
<div class="box box2"></div>
<div class="box box3"></div>
</body>

类名是在标签类写了一个class属性，写在css中的类名前面要加一个" . ",一个标签可以有多个类名，空格隔开，一个类名可以被多个标签定义，在设置有这个类名的标签的样式时，会影响所有定义了这个类名的标签。
注意:
① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
② 可以理解为给这个标签起了一个名字，来表示。
③ 长名称或词组可以使用中横线来为选择器命名。
④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。 ⑥ 命名规范：见附件（ Web 前端开发规范手册.doc）
⑥标签class 属性中可以写多个类名，多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式

类选择器和id选择器的区别：
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。 ③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

4.通配符选择器

<style>
*{
backgroun:red
}
</style>
<body>
<div id="box"> </div>
<div id="box2"></div>
</body>

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。不需要给标签的class里写*，直接就能使用了