网络安全之前端学习（css选择器）

话接上回，讲到了css的基础属性，那么这一节主要讲讲css选择器，这是css中比较重要的一环，希望大家认真学习。

首先就是什么是选择器呢？

每一条css样式定义由两部分组成，形式如下：  选择器{样式}  在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

1.全局选择器

使用*{}的方法可以使全部的内容使用这个样式

这个多用于初始化的时候使用全局选择器，使所有标签都配上样式。

2.元素选择器

这也是选择器中应用较多的一种，对于所要的标签进行选择，比如p/b/a等等标签。

这里我那p标签举例。

可以看到对于所有的标签，只有p标签进行选择。但是这里有一个问题，当我们有2个p标签时，如果我只想对第一个进行选择，那么要怎么办呢？

3.类选择器

类选择器就很好的解决这一问题。类选择器使用class关键字，

这里可以看到类选择器只对选择了这个类进行赋值，如果没有这个类就无法变形。

这里要说几点，类选择器可以被多个标签选择，比如上面的我可以两个p标签都先择这个类，就达到两个都被选择的效果。同时，类名不可以以数字开头，最后就是一个标签可以使用多个选择器，使用语句为<p class=”oneclass twoclass”></p>,将两个选择器放在一起，用空格隔开。

4.id选择器

id选择器与类选择器类似，都是对于某个特定的标签选择。

这里大家就可能有疑惑了，这个类选择器和id选择器不能说是差不多吧，只能说使一模一样，其实他还是有很多不同的，不仅仅是“#”和“.”的区别，id选择器只可以被一个标签使用，不可共用于多个标签，所以id是唯一的。而类选择器可以被多个标签使用，可以理解为一个大类。当然，id选择器也是不能用数字开头。

5.合并选择器

合并选择器顾名思义，就是对多个标签合并选择。

可以避免重复命名。但是我看着好像可以使用类选择器，如果有懂得的大佬可以在评论区讲解一下二者的不同。

6.优先级

以上就是所有选择器的内容了，最后讲一讲所有选择器的优先级

行内样式>id选择器>类选择器>全局选择器

可以理解为所用的范围越小，优先级越高。

7.结语

那么以上就是本节的所有内容，希望大家上机实验，本文记录自哔哩哔哩的https://www.bilibili.com/video/BV1oz421q7BB/?spm_id_from=333.337.search-card.all.click

原文始发于微信公众号（泷羽Sec-林）：网络安全之前端学习（css选择器）