一、CSS基础选择器

1.标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签。
能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式，只能选择全部的当前标签。

div{
    width:200px;
    height: 300px;
    background-color: #fff;
}

2.类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

.red {
    color: red;
}

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.号显示。

<div class="red"> 变红色 </div>

① 类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
② 可以理解为给这个标签起了一个名字，来表示。
③ 长名称或词组可以使用中横线来为选择器命名。
④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。

<div class="red font20">多类名空格隔开</div>

1）在标签class 属性中写多个类名；
2）多个类名中间必须用空格分开；
3）这个标签就可以分别具有这些类名的样式；
多类名开发中使用场景：
1）可以把一些标签元素相同的样式(共同的部分)放到一个类里面；
2）这些标签都可以调用这个公共的类,然后再调用自己独有的类；
3）从而节省CSS代码,统一修改也非常方便；

3.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以#来定义。

#nav {
    color:rgb(red, green, blue);
}

id 属性只能在每个 HTML 文档中出现一次。

<div id="nav"> 变白色 </div>

4.通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）。

* {
    margin: 0;
    padding: 0;
}

配符选择器不需要调用， 自动就给所有的元素使用样式；
特殊情况用来清除所有元素标签的内外边距；

二、CSS复合选择器

1.后代选择器

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

ul li { /* 选择 ul 里面所有的 li标签元素 */
    color:#fff; 
} 

元素1 元素2 { 样式声明 }
上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
元素1 和 元素2 中间用空格隔开；
元素1 是父级，元素2 是子级，最终选择的是元素2；
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可；
元素1 和 元素2 可以是任意基础选择器；

2.子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

div > p {  /* 选择 div 里面所有最近一级 p 标签元素 */
    color:#fff; 
}

元素1 > 元素2 { 样式声明 }
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
元素1 和 元素2 中间用 大于号 隔开；
元素1 是父级，元素2 是子级，最终选择的是元素2；
元素2 必须是亲儿子，其孙子、重孙之类都不归他管，也可以叫他亲儿子选择器；

3.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分。

ul,div { /* 选择 ul 和 div标签元素 */
    color:#fff; 
} 

元素1,元素2 { 样式声明 }
上述语法表示选择元素1 和 元素2。
元素1 和 元素2 中间用逗号隔开；
逗号可以理解为和的意思；
并集选择器通常用于集体声明；

4.链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号:表示，比如 :hover 、 :first-child 。
伪类选择器有很多，比如有链接伪类、结构伪类等。
对于链接伪类选择器，为了确保生效，按照 LVHA 的循顺序声明 :link→:visited→:hover→:active。
link:未被访问过
visited:已访问
hover:鼠标悬停
active:鼠标按下不松开时

/* a 是标签选择器 所有的链接 */
a {
    color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
    color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

👉hover状态改变另一个元素样式的使用👈

/* 情景一：改变本身样式 */
#self:hover {
    background-color: rgba(43, 143, 243, 0.63);
}

/* 情景二：两个是兄弟元素 */
.brother1:hover+.brother2 {
    color: red;
}

/* 情景三：两个是父子元素 */
.father:hover .son {
    color: red;
}

/* 情景四：两个是兄弟元素,改变的是一个兄弟元素的子元素 */
#brother1:hover+#brother2>.brother2son {
    color: red;
}

5.focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
    background-color:yellow;
}