CSS选择器是一种用于选择HTML元素的模式。它们用于"定位"您想要为其指定样式的元素。以下是一些常用的CSS选择器：
- 元素选择器 ：这是最基本的选择器，它根据HTML元素名称选择元素。例如，
p选择器会选择页面上的所有<p>元素。
css
复制代码
p {
color: red;
}
- 类选择器 ：这种选择器使用HTML元素的
class属性来选择元素。类选择器以.开始。例如，.intro选择器会选择所有class="intro"的元素。
css
复制代码
.intro {
font-size: 20px;
}
- ID选择器 ：这种选择器使用HTML元素的
id属性来选择元素。ID选择器以#开始。每个页面上的ID应该是唯一的。
css
复制代码
#firstname {
border: 1px solid black;
}
- 属性选择器：这种选择器根据元素的属性及属性值来选择元素。
css
复制代码
input[type="text"] {
width: 100%;
}
- 伪类选择器：这种选择器用于选择特定状态的元素，如鼠标悬停时的元素。
css
复制代码
a:hover {
color: green;
}
- 子元素选择器：这种选择器选择某个元素的直接子元素。
css
复制代码
div > p {
color: blue;
}
- 相邻兄弟选择器：这种选择器选择紧跟在另一个元素后的元素，且二者有相同的父元素。
css
复制代码
h1 + p {
color: purple;
}
- 通用选择器：这种选择器选择页面上的所有元素。
css
复制代码
* {
margin: 0;
padding: 0;
}
- 伪元素选择器：这种选择器用于选择元素的某一部分，如元素的第一个字母或第一行。
css
复制代码
p::first-letter {
font-size: 200%;
}
p::first-line {
text-decoration: underline;
}
- 后代选择器（Descendant Selector）：这种选择器选择某个元素内部的所有后代元素，无论嵌套多深。
css
复制代码
div p {
color: orange;
}
- 分组选择器（Group Selector）：这种选择器允许您为多个选择器指定相同的样式规则。
css
复制代码
h1, h2, p {
color: pink;
}
- 否定伪类选择器（Negation Pseudo-class Selector）：这种选择器选择不匹配特定模式的元素。
css
复制代码
:not(p) {
color: brown;
}
- 结构伪类选择器（Structural Pseudo-class Selectors）：这些选择器基于元素在文档树中的位置或关系来选择元素。
css
复制代码
/* 选择第一个子元素 */
li:first-child {
color: teal;
}
/* 选择最后一个子元素 */
li:last-child {
color: lightgreen;
}
/* 选择第n个子元素 */
li:nth-child(3) {
color: violet;
}
/* 选择第n个类型的元素 */
p:nth-of-type(2) {
color: lightblue;
}
- 输入类型伪类选择器（Input Type Pseudo-class Selectors）：这些选择器用于选择特定类型的输入元素。
css
复制代码
input[type="checkbox"] {
margin: 5px;
}
- 表单伪类选择器（Form Pseudo-class Selectors）：这些选择器用于选择表单元素的不同状态。
css
复制代码
input:required {
box-shadow: 0 0 5px red;
}
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
- UI元素状态伪类选择器（UI Element State Pseudo-class Selectors）：这些选择器用于选择具有特定用户界面状态的元素。
css
复制代码
button:enabled {
background-color: white;
}
button:disabled {
background-color: lightgray;
}
- 伪元素选择器 （Pseudo-element Selectors）（续）：除了之前提到的
::first-letter和::first-line，还有许多其他的伪元素选择器。
css
复制代码
/* 选择元素的前置内容 */
p::before {
content: "前置文本: ";
}
/* 选择元素的后置内容 */
p::after {
content: " 后置文本";
}
/* 选择元素的第一个字母 */
p::first-letter {
font-size: 2em;
}
/* 选择元素的第一行 */
p::first-line {
text-transform: uppercase;
}