CSS的选择器
### 一、选择器
#### 1、选择器的作用
就是根据不同的需求，把不同的标签选出来，即选择标签用的
#### 2、选择器的分类
选择器分为 基础选择器 和 复合选择器
基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器
复合选择器又包括：后代选择器、子选择器、并集选择器、伪类选择器
### 二、基础选择器
基础选择器是由单个选择器组成的
#### 1、标签选择器
标签选择器(元素选择器)是指使用HTML标签名称作为选择器，按标签名称分类
为页面中某一类标签指定统一的CSS样式
```CSS
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
......
}
```
#### 2、类选择器
如果想要差异化的选择不同的标签，单独选择一个或多个·标签时，可以使用类选择器
在CSS中，类选择器以一个点” . “号来显示，后面紧跟类名(自定义，我们自己使用class命名的)
c
此结构需要使用class属性来调用
```HTML
<div class="red"> 红色 </div>
或
<li class="red"> 红色 </li>
<!-- 在HTML标签中添加class属性，在CSS中便可针对以添加class的标签来修改其样式-->
```
###### 多类名
可将一个标签指定多个类名，从而达到更多的选择目的，即一个标签有多个名字，这些类名都可以选出这个标签
###### 1.使用方式
```HTML
<div class="类名1 类名2 ..."> xyy </div>
```
每个类名之间使用空格分开
在布局时，多个标签具有同一样式时可使用
#### 3、id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以” # “来定义
```CSS
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
......
}
```
注意：
id属性只能在每个HTML文档中出现一次！！！
###### 类选择器和id选择器的区别
1.类选择器（class）相当于一个人的名字，一个人可以有多个名字，一个名字也可以被多个人使用
2.id选择器相当于一个人的身份证号，是唯一的，不得重复的
3.其最大的区别在于使用次数上
4.类选择器在修改样式中使用最多，id选择器一般用于唯一性的元素上，常和JS搭配使用
#### 4、通配符选择器
在CSS中，通配符选择器使用” * “定义，他表示选取页面中的所有元素(标签)
```CSS
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
......
}
```
通配符选择器不需要调用，自动就给所有的元素使用样式
但一般在特殊情况下才使用
如：
```CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
#### 5、基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 使用 |
| ------ | ----------------- | -------------------- | ------- | ----- |
| 标签选择器 | 可以选出所有相同的标签，如< p> | 不能差异化选择 | 较多 | 标签名 |
| 类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .类名 |
| id选择器 | 一次只能选择一个标签 | id属性只能在每个HTML文档中出现一次 | 一般和JS搭配 | # id名 |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * |
### 三、复合选择器
复合选择器是建立在基础选择器之上，是对基础选择器进行组合而形成的
#### 1、后代选择器
后代选择器又称为包含选择器，可以选择父元素里的子元素
其写法就是把外层标签写在前面，内层标签写在后面，中间使用空格进行分隔
当标签发生嵌套时，内层标签就成为外层标签的后代
```CSS
元素1 元素2 ... {
声明样式 /* 选择 元素1 中的 元素2 中的 ... 进行样式的修改 */
}
```
#### 2、子元素选择器
子选择器只能选择作某元素的最近一级子元素
```CSS
元素1 > 元素2 {
样式声明
}
```
元素1是父级，元素2是子级，但最终选择的是元素2
但是元素2必须是 亲儿子 不可以是 孙子......
如：
```HTML
<head>
......
<style>
/* 选择.nav 里面所有最近一级的 a 标签元素 */
.nav>a{
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#"> 儿子 </a> <!-- 最近一级 -->
<p>
<a href="#"> 孙子 </a> <!-- 非最近一级 -->
</p>
<a href="#"> 儿子 </a> <!-- 最近一级 -->
</div>
</body>
```
#### 3、并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
通过“ , ”英文逗号连接而成，任何形式的选择器都可以成为并集选择器的一部分
```CSS
元素1 , 元素2 ,...{
样式声明 /* 选择 元素1 和 元素2 进行样式的修改 */
}
```
#### 4、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如：给链接添加特殊效果，或选择第1/n个元素
其书写的最大特点为使用冒号“ : ” 表示，如： :houvr 、 :first-child
##### 1、链接伪类选择器
| 链接伪类选择器 | 作用 |
| --------- | ------------------- |
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有以被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接（鼠标按下未弹起时的链接） |
```HTML
<head>
......
<style>
/* 未访问的链接 a: link 把还没有点击(访问)过的链接选出来 */
a:link { color: #333; }
/* 点击过的链接 a:visited 把已经点击(访问)过的链接选出来*/
a:visited { color: orange; }
/* 鼠标经过的链接 a:hover 把当鼠标经过时的链接选出来*/
a:hover { color: skyblue; }
/* 鼠标点击时的链接 a:active 当鼠标正在按下但未弹起时的链接*/
a:active { color: green; }
</style>
</head>
<body>
<a href="https://www.bilibili.com"> 喜羊羊 </a>
</body>
```
注意事项：
1. 为了确保生效，请按照以上顺序(LVHA)进行声明：:link - :visited - :hover - :active
2. 因为a链接在浏览器中具有默认样式，所以在实际工作中要给链接单独指定样式
在实际开发中的写法：
```CSS
/* a 是标签选择器 包含所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 表示鼠标经过 */
a:hover {
color: red; /* 当鼠标经过时，由原来的 灰色 变为 红色 */
text-decoration: nderline; /* 取消下划线 */
}
```
##### 2、focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况 < input>类表单元才能获取，因此这个选择器主要针对于表单元素来说
```CSS
/* 把获得光标的input表单元素选取出来 */
input:focus{
background-color:yellow; /* 设置表单颜色 */
}
```
使用：
```HTML
<head>
......
<style>
input:focus{
background-color: pink;
color: red;
}
</style>
</head>
<body>
<!-- 当光标选中那个表单时，哪个表单就会按照所设置的样式而变化 -->
<input type="text">
<input type="text">
<input type="text">
</body>
```
#### 5、复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| ----------- | ----------- | ------- | ---- | ------------------------- |
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 多 | 符号是空格 .nav a |
| 子选择器 | 选择最近一级元素 | 只能是亲儿子 | 少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可用于集体声明 | 多 | 符号是逗号 .nav1 , .nav2 |
| 链接伪类选择器 | 选择不同状态的链接 | 和链接相关 | 多 | 记住 a{ } 和 a:hover 实际开发的写法 |
| :focus伪类选择器 | 选择获得光标的表单 | 和表单相关 | 少 | 记住 input:focus |