【前端】关于CSS的选择器

选择器可以分为基本选择器、复合选择器、链接伪类选择器

一、基本选择器

1、标签选择器

​ 选择某一类标签，比如div、span、h1、ul、li

2、类选择器（重点）

. 类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 调用的时候用 class = "类名"

​ 可以一个或者多个标签选择。

​ 类选择器的命命规则

1、不能以纯数字

2、不能以数字开头

3、不能使用关键字

4、建议字幕和数字结合使用

2.1 多类名选择器（一个标签选择多个类选择器下的样式）

<div class="wo hao bang">Kighua</div>

​ 中间用空格分开即可。

3、ID选择器 (只能使用一次)

用法如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

​ 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

4、通配符选择器

​ 所有标签全部使用该选择器下的样式：*{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

---

二、复合选择器

1、后代选择器

（像拥有后代关系一样，没有亲生和非亲生的关系，都是后代🤣🤣 ）

​ 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

​ 使用用法：一代跟着一代

div ul a{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

2、子元素选择器

（像拥有后代关系一样，有亲生和非亲生的区别，必须是亲生的。 白话：这里的子 指的是 亲儿子 不包含孙子 重孙子之类。）

​ 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格

比如：.div > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

3、交集选择器

(使用较少，不建议)

​ 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如

h3.hello{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

4、并集选择器

​ 各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如：

.one, p , #test {color: #F00;}

​ 通常用于集体声明。

---

三、链接伪类选择器

（用于向某些选择器添加特殊的效果）

方便记忆：

类 . one
伪类 ：hover

• : link /* 未访问的链接 */
• : visited /* 已访问的链接 */
• : hover /* 鼠标移动到链接上 */
• : active /* 选定的链接 *

PS : 他们的顺序尽量不要颠倒 按照 lvha 的顺序。lv （包包）hao（好）