CSS（层叠样式表）是一种用于设计网页样式的语言。
选择器是用于指定元素的样式的关键字或标签。
以下是CSS中常见的选择器及其含义：
1.元素选择器：用于选择页面中的所有元素，包括文本、图像、链接等。
2.类选择器：用于选择具有特定类名的元素，例如.button、.text-center等。
为标签设置class属性，通过 .类名 的方式设置CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div class="red">青春不常在，抓紧谈恋爱</div>
</body>
</html>3.ID选择器：用于选择具有特定 ID 的元素，例如#my-button等。
为标签设置id属性，通过 #id名 的方式设置CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<div id="red">青春不常在，抓紧谈恋爱</div>
</body>
</html>4.标签选择器：用于选择具有特定标签名的元素，例如<h1>、<p>等。
5.属性选择器：用于选择具有特定属性名和属性值的元素，例如[class="my-class"]、data-id="123"等。
6.后代选择器：用于选择具有特定后代元素的元素，例如.child:first-child、.has-child等。
后代选择器又称为包含选择器，可以选择父元素中的后代元素。
语法：元素1 元素2,元素3...元素n { 样式 } —— 选择元素1中 的所有后代元素2、元素3...元素n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body div, strong {
color: red;
}
</style>
</head>
<body>
<div>青春不常在，抓紧谈恋爱1</div>
<span>
<strong>青春不常在，抓紧谈恋爱2</strong>
</span>
</body>
</html>7.继承选择器：用于选择具有特定继承元素的元素，例如.parent > *、.parent ~ *等。
8.伪类选择器：用于选择具有特定伪类名的元素，例如:hover、.active等。
9.伪元素选择器：用于选择具有特定伪元素名的元素，例如::before等。
10.全局选择器：用于选择整个页面中的所有元素，例如body等。
11.通配符选择器。
在CSS中，通配符选择器使用 * 定义，它表示选中页面中的所有标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>青春不常在，抓紧谈恋爱1</div>
<div>青春不常在，抓紧谈恋爱2</div>
</body>
</html>12.子选择器
子选择器只能选择某元素的最近一级子元素。
语法：元素1 > 元素2,元素3...元素n { 样式 } —— 选择元素1中所有子元素2、元素3...元素n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body > div, span {
color: red;
}
</style>
</head>
<body>
<div>青春不常在，抓紧谈恋爱1</div>
<span>
<strong>青春不常在，抓紧谈恋爱2</strong>
</span>
</body>
</html>13.并集选择器
并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过 , 连接而成，任何形式的选择器都能作为并集选择器的一部分。语法：元素1,元素2...元素n { 样式 } —— 选择元素1、元素2...元素n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, span {
color: red;
}
</style>
</head>
<body>
<div>青春不常在，抓紧谈恋爱1</div>
<span>
<strong>青春不常在，抓紧谈恋爱2</strong>
</span>
</body>
</html>14.链接伪类选择器
所有标签都可添加，遵循LVHA书写顺序。
- a:link —— 选择所有未被访问的链接。
- a:visited —— 选择所有已被访问的链接。
- a:hover —— 选择鼠标指针位于其上的链接。
- a:active —— 选择活动链接（鼠标按下未弹起）。
15.focus伪类选择器
:focus 伪类选择器用于选取获得焦点（光标）的表单元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*获得焦点的input表单背景色变为红色*/
input:focus {
background-color: red;
}
</style>
</head>
<body>
<form>
<input type="password">
</form>
</body>
</html>CSS3新增选择器
属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样就可以不借助类选择器或id选择器。
- E[att] —— 选择具有att属性的E元素。
- E[att="val"] —— 选择具有att属性且属性值等于val的E元素。
- E[att^="val"] —— 匹配具有att属性且属性值以val开头的E元素。
- E[att$="val"] —— 匹配具有att属性且属性值以val结尾的E元素。
- E[att*="val"] —— 匹配具有att属性且属性值含有val的E元素。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素。
- E:first-child —— 匹配父元素中第一个子元素E。
- E:last-child —— 匹配父元素中最后一个子元素E。
- E:nth-child(n) —— 匹配父元素中第n个子元素E。
- E:first-of-type —— 指定类型 E 的第一个。
- E:last-of-type —— 指定类型 E 的最后一个。
- E:nth-of-type(n) —— 指定类型 E 的第n个。
- n可以是数字、关键字（even 偶数 odd奇数）、公式（2n偶数、2n+1奇数、5n倍数、n+5从5开始到最后、-n+5前5个）。
区别：
1.E:nth-child(n)对父元素里面的所有孩子排序选择，先找到第n个孩子，然后看是否和E匹配。
2.E:nth-of-type(n)对父元素里面指定子元素进行排序选择，先匹配E，然后根据E找到第n个孩子。
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签。
- ::before —— 在元素内部的前面插入内容。
- ::after —— 在元素内部的后面插入内容。
语法：element::before{}
注意：
before和after创建的元素属于行内元素。
新创建的元素在文档树是找不到的，所以称为伪元素。
before和after必须有content属性。