CSS 元素选择器
CSS 元素选择器是用于选择 HTML 文档中特定元素的强大工具。通过使用选择器，您可以针对特定元素应用样式，从而创建复杂且高度定制化的设计。
基本选择器
标签选择器
最基本的元素选择器是标签选择器，它用于选择特定标签名的元素。例如：
p {
color: red;
}此选择器将所有 <p> 元素的文本颜色设置为红色。
类选择器
类选择器用于选择具有特定类名的元素。类名以句点（.）开头。例如：
.my-class {
background-color: blue;
}此选择器将所有具有类名“my-class”的元素的背景颜色设置为蓝色。
ID 选择器
ID 选择器用于选择具有特定 ID 的元素。ID 以井号（#）开头。例如：
#my-id {
font-size: 2em;
}此选择器将具有 ID“my-id”的元素的字体大小设置为 2em。
组合选择器
组合选择器允许您将多个基本选择器组合在一起以选择更具体的元素。
后代选择器
后代选择器用于选择特定祖先元素内的后代元素。它使用空格（ ）分隔选择器。例如：
div p {
color: green;
}此选择器将所有位于 <div> 元素内的 <p> 元素的文本颜色设置为绿色。
子选择器
子选择器专门用于选择特定父元素的直接子元素。它使用大于号（>）分隔选择器。例如：
ul > li {
list-style-type: none;
}此选择器将所有作为 <ul> 元素直接子元素的 <li> 元素的列表样式类型设置为“none”。
相邻兄弟选择器
相邻兄弟选择器用于选择紧跟在特定元素之后的相邻元素。它使用加号（+）分隔选择器。例如：
p + h2 {
font-weight: bold;
}此选择器将所有紧跟在 <p> 元素之后的 <h2> 元素的字体加粗。
属性选择器
属性选择器允许您根据元素的属性值选择元素。
属性存在选择器
属性存在选择器用于选择具有特定属性的元素，无论其值如何。它使用方括号（[]）和属性名称。例如：
[disabled] {
opacity: 0.5;
}此选择器将所有具有“disabled”属性的元素的透明度设置为 0.5。
属性值选择器
属性值选择器允许您根据属性的确切值选择元素。它使用方括号（[]）、属性名称和等于号（=），后跟属性值。例如：
[type="checkbox"] {
margin-right: 10px;
}此选择器将所有具有“type”属性且值为“checkbox”的元素的边距右侧设置为 10px。
伪类选择器
伪类选择器用于选择处于特定状态的元素。
链接伪类
链接伪类用于选择链接元素。它们包括：
:link- 尚未访问的链接:visited- 已访问的链接:hover- 当鼠标悬停在链接上时:active- 当单击链接时
例如：
a:hover {
color: blue;
}此选择器将在鼠标悬停在链接上时将链接文本颜色设置为蓝色。
表单伪类
表单伪类用于选择表单元素。它们包括：
:focus- 当表单元素获得焦点时:valid- 当表单元素输入有效值时:invalid- 当表单元素输入无效值时
例如：
input:focus {
border: 1px solid blue;
}此选择器将在表单元素获得焦点时为表单元素设置 1px 蓝色边框。
伪元素选择器
伪元素选择器用于选择元素的特定部分。
内容伪元素
内容伪元素用于选择元素的内容。它们包括：
::before- 在元素内容之前插入内容::after- 在元素内容之后插入内容
例如：
p::before {
content: "Hello, ";
}此选择器将在每个 <p> 元素内容之前插入“Hello, ”文本。
优先级
当多个选择器应用于同一元素时，优先级最高的那个将被使用。优先级由以下因素决定：
- **特异性：**更具体的元素选择器具有更高的特异性。例如，ID 选择器的特异性高于标签选择器。
- **顺序：**CSS 样式表中后出现的选择器优先级更高。
结论
CSS 元素选择器是强大的工具，可让您精确地针对 HTML 文档中的特定元素。通过理解和使用各种选择器，您可以创建复杂且高度定制化的设计，从而增强用户体验。