详解CSS中的选择器

CSS选择器的作用是指定、控制CSS要作用的HTML元素。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

下面来谈谈CSS选择器的分类：

1. 通配符选择器

CSS的通配符选择器是一种比较特殊的选择器，用“*”表示。
格式：*{property:value；...…}
含义：可以选中页面中所有元素，对所有元素都生效用途：一般用于设置一些初始化的公共属性

2. 元素选择器

使用某个HTML元素名作为选择器
格式：E{property:value；..…}

3. id选择器

id是指我们可以在HTML标签上设置一个id属性值id属性的特点是一个HTML文档，只能有唯一的一个，不能重复

格式为：#id{property:value；...…}
含义：可以选中页面中含有id属性值的元素

4. 类选择器

格式：class{property:value；....}
类选择器中的类指的是class属性

有相同class属性值的都会被选中

class与id相比不具有唯一性

class属性的值通常以字母开头中间不能有空格

类选择器可以和元素选择器组合使用

例如：<div class="title”>华为5G技术</div>

5. 属性选择器

属性选择器是用于对具有某种属性的元素设置CSS样式

格式为：Elattribute]{property:value；...…}
E代表元素，D表示元素的属性。

属性的种类：
[attribute]用于选取指定属性（attribute）的元素
[attribute=value]用于选取指定属性（atribute）和指定属性值（value）的元素
[attribute~=value]用于选取属性值中包含指定值的元素
[attributel=value]用于选取以指定值开头的属性值的元素

例如：<div title="spring">春风十里</div>

6. 伪类选择器

通过伪类来选中相应元素进而添加样式的选择器

伪类名可以单独使用，也可以和其它选择器一起使用

一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类元素

选择符和冒号之间不能有空格

伪类选择器最喜欢和超链接（a元素）一起使用

常见的伪类如下（顺序很重要）：

：link 表示未被访问的链接
：visited 表示已被访问的链接
：hover 鼠标经过链接上方时的状态
：active链接被激活时的状态

例如：<a href="https://www.huawei.com">华为官网</a>

hover必须放在link和visited之后，不然样式会被覆盖。

active必须放在hover之后，不然样式也会被覆盖

有个口诀是love & hate,就是上述四个单词的首单词的顺序。

7. 派生选择器

派生选择器包括：

7.1 后代选择器

后代选择器主要是用来选择某个元素的后代元素

格式为：父元素子元素{property:value；...…}
注意点：父元素与子元素之间至少有一个空格，可以有很多空格

7.2 子元素选择器

格式为：父元素>子元素{property:value；.…}
用来选择作为某一个元素子元素的元素，与后代选择器的区别是后代选择器选的是所有子元素，而子元素原择器只选第一级子元素

7.3 相邻兄弟选择器

格式为：父元素+子元素{property；value；.…}
用来选择紧跟在一个元素之后的兄弟元素这两个相邻元素一定是同级元素

上述几种选择器的权重为：