CSS选择器
CSS（层叠样式表）中有多种选择器，用于选择要应用样式的特定元素或元素组合。
1. 元素选择器（Element Selector）
- 通过元素名称选择元素，例如 p 选择所有 < p > 元素。
p {
color: blue;
}
上述示例中，将选择所有 < p > 元素，并将文本颜色设置为蓝色。
2. 类选择器（Class Selector）
- 通过类名选择元素，以点号（.）开头，例如 .my-class 选择具有 my-class 类的元素。
.my-class {
font-weight: bold;
}
上述示例中，将选择所有具有 my-class 类的元素，并将字体加粗。
3. ID选择器（ID Selector）
- 通过元素的唯一ID选择元素，以井号（#）开头，例如 #my-id 选择具有 my-id ID的元素。
#my-id {
background-color: yellow;
}
上述示例中，将选择具有 my-id ID的元素，并将背景颜色设置为黄色。
4. 属性选择器（Attribute Selector）
- 通过元素的属性选择元素，例如 [type=“text”] 选择具有 type 属性值为 “text” 的元素。
input[type="text"] {
border: 1px solid gray;
}
上述示例中，将选择所有 type 属性值为 “text” 的 < input > 元素，并设置边框样式。
5. 后代选择器（Descendant Selector）
- 选择特定元素的后代元素，使用空格分隔，例如 ul li 选择 < ul > 元素内的所有< li >元素
ul li {
list-style-type: square;
}
上述示例中，将选择所有 < ul > 元素内的所有 < li > 元素，并将列表样式设置为方块。
6. 子元素选择器（Child Selector）
- 选择特定元素的直接子元素，使用大于号（>）分隔，例如 ul > li 选择 < ul > 元素的直接子元素 < li >。
ul > li {
margin-left: 20px;
}
上述示例中，将选择 < ul > 元素的直接子元素 < li >，并设置左边距为20像素。
7. 相邻兄弟选择器（Adjacent Sibling Selector）
- 选择紧接在另一个元素后面的元素，使用加号（+）分隔，例如 h2 + p 选择紧接在 < h2 > 元素后的 < p > 元素。
h2 + p {
font-size: 18px;
}
上述示例中，将选择紧接在 < h2 > 元素后的 < p > 元素，并将字体大小设置为18像素。
8. 通用选择器（Universal Selector）
- 选择所有元素，使用星号（*），例如 * 选择文档中的所有元素。
* {
margin: 0;
padding: 0;
}
上述示例中，将选择文档中的所有元素，并将外边距和内边距都设置为0。
9. 伪类选择器
- 当使用CSS时，伪类选择器用于选择元素的特定状态或位置。它们以冒号（:）开头，并添加到选择器的末尾。
1. :hover（悬停状态）：
a:hover {
color: red;
}
上述示例中，当鼠标悬停在链接上时，链接的文本颜色将变为红色。
2. :active（激活状态）：
button:active {
background-color: gray;
}
上述示例中，当按钮被按下时，按钮的背景颜色将变为灰色。
3. :focus（焦点状态）：
input:focus {
border: 1px solid blue;
}
上述示例中，当输入框获取焦点时，输入框的边框将变为蓝色
4. :first-child（第一个子元素）：
ul li:first-child {
font-weight: bold;
}
上述示例中，选择 < ul > 元素中的第一个 < li > 元素，并将字体加粗。
5. :last-child（最后一个子元素）：
ul li:last-child {
color: green;
}
上述示例中，选择 < ul > 元素中的最后一个 < li > 元素，并将文本颜色设置为绿色。
6. :nth-child(n)（第 n 个子元素）：
ul li:nth-child(odd) {
background-color: lightgray;
}
上述示例中，选择 < ul > 元素中的奇数位置的 < li > 元素，并设置背景颜色为浅灰色。
