前言
🦔在前端开发过程中对元素进行设置样式，进行样式的设置一定离不开选择器的使用，CSS的选择器有很多，这篇文章将介绍下CSS中的常用选择器，本文章是是基础入门教程，也是个人学习笔记的性质，前端老鸟请绕路。
一.初识选择器
😣在开发中经常要对特定的网页进行属性的设置，那么我们如何找到这个元素哪？答案就是选择器，CSS常见的选择器有如下的内容。
- 通用选择器
- 元素选择器
- 类选择器
ID选择器- 属性选择器
- 组合
- 伪类
- 伪元素
二.通用选择器
👽通用选择器*所有的元素都会被选中，一般给一些元素设置一些通用的属性，如内边距，外边距，效率比较低尽量不要使用，使用这个通配符所有的元素都会生效。
html
* {
width: 100px;
height: 100px;
padding: 16px;
background-color: aquamarine;
}三.简单选择器
🦧简单选择器就是平时开发中最简单的选择器。
- 元素选择器，使用元素的名称。
- 类选择器，使用类名。
- id选择器，使用
#id。
😳注意事项：在一个HTML文档中的id是唯一的，不能重复。
id值如果由多个单词组成，单词之间可以用中划线-，下划线_连接，也可以使用驼峰标识。- 最好不要用标签签名作为
id值。 - 中划线又叫连字符。
四.属性选择器
🦔常用的属性选择器如下：
- 拥有某一个属性
[att] - 属性等于某个值
[att=val]
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[title=aaa] {
color: aquamarine;
}
[title] {
font-size: large;
}
</style>
</head>
<body>
<div title="aaa">HelloWorld</div>
<div title="bbb">你好世界</div>
</body>
</html>
🐸在开发中基本用不到的选择器，只需要了解即可的内容（不用记）
[attr*=val]: 属性值包含某一个值val。[attr^=val]: 属性值以val开头。[attr$=val]: 属性值以val结尾。[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割
五.后代选择器
😳后代选择器分为两种，一种是所有后代选择器，另外一种是直接后代选择器，
- 所有后代选择器：使用空格分割，表示所有的后代。
- 直接后代选择器：使用
>分割。
六.兄弟选择器
🦧兄弟选择器也是分为两种，一种是普通兄弟选择器一种是相邻兄弟选择器。
- 相邻兄弟选择器：使用符号
+连接。
- 普遍兄弟选择器：使用符号
~连接
七.选择器组
🐔交集选择器：需要同时符合两个选择器的条件(两个选择器紧密相连)在开发中一般用来精准选中某个元素。
😳并集选择器：符合一个条件即可（选择器以，分割）在开发中通常用来设置相同的样式。
八.伪类元素
🐸伪类也是选择器的一种，用来选中特定状态的元素，伪类有非常多种类型
🦥动态伪类：:link``:visited``:hover``:active``:focus
:hover当鼠标悬停在上面的时候状态变化（目前仅需要掌握这一个就可以了）
html
<style>
.box:hover {
color: red;
}
</style>
<div class="box">宁愿用这一生等你发现</div>
<div class="box2">我一直在你身旁从未走远</div>
<div class="box3">想你时你在天边</div>
👽目标伪类：:target
😳语言伪类：:lang
🐣元素状态伪类：:enabled :disabled :checked
🦔结构伪类：:nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()
:first-child :last-child :first-of-type :last-of-type
:root :only-child :only-of-type :empty
🐻❄️否定伪类：:not()
九.伪元素
😣常见的伪元素有如下这些内容。
:first-line::first-line：可以针对首行文本设置属性。:first-letter::first-letter:before::before：:after::after
十.总结
🐸这篇文章我们总结了一下常见的选择器内容，CSS的选择器非常多，以上就是我们日常使用的内容，其余不常用的我们知道在哪里进行查询就好~