常用CSS选择器
CSS（层叠样式表）选择器是用来选取 HTML 或 XML 文档中的元素，以便应用样式规则。以下是 CSS 中常用的选择器及其说明：
基本选择器
-
标签选择器（Type Selector）
- 选择所有指定标签的元素。
p { color: red; } -
类选择器（Class Selector）
- 选择具有指定类的所有元素。
.highlight { background-color: yellow; } -
ID 选择器（ID Selector）
- 选择具有指定 ID 的单个元素。
#main-header { font-size: 2em; } -
通用选择器（Universal Selector）
- 选择所有元素。
* { margin: 0; padding: 0; } -
伪类选择器（Pseudo-Class Selector）
- 选择具有特定状态的元素。
a:hover { color: blue; }
后代选择器（Descendant Selector）
- 后代选择器
- 选择某个元素的后代元素。
div p { color: green; }
子元素选择器（Child Selector）
- 子选择器
- 选择某个元素的直接子元素。
div > p { color: blue; }
相邻兄弟选择器（Adjacent Sibling Selector）
- 相邻兄弟选择器
- 选择紧跟着前面元素的第一个元素。
h1 + p { text-align: center; }
通用兄弟选择器（General Sibling Selector）
- 通用兄弟选择器
- 选择前面元素后面的所有元素。
h1 ~ p { text-align: right; }
属性选择器（Attribute Selector）
-
属性选择器
- 选择具有指定属性的元素。
input[type="text"] { border: 1px solid black; } -
属性包含值选择器
- 选择具有指定属性值包含特定字符串的元素。
[title~=important] { font-weight: bold; } -
属性开始值选择器
- 选择具有指定属性值以特定字符串开头的元素。
[href^="http"] { color: orange; } -
属性结束值选择器
- 选择具有指定属性值以特定字符串结尾的元素。
[class$="footer"] { background-color: lightgray; } -
属性包含值选择器
- 选择具有指定属性值包含特定子字符串的元素。
[class*="sidebar"] { float: right; }
结构化伪类选择器（Structural Pseudo-Class Selector）
-
第一子元素选择器（First Child）
- 选择父元素的第一个子元素。
p:first-child { font-weight: bold; } -
最后一个子元素选择器（Last Child）
- 选择父元素的最后一个子元素。
p:last-child { color: purple; } -
唯一子元素选择器（Only Child）
- 选择父元素唯一的子元素。
p:only-child { font-style: italic; } -
第一个类型选择器（First of Type）
- 选择父元素第一个特定类型的子元素。
p:first-of-type { border-left: 2px solid black; } -
最后一个类型选择器（Last of Type）
- 选择父元素最后一个特定类型的子元素。
p:last-of-type { border-right: 2px solid black; } -
唯一类型选择器（Only of Type）
- 选择父元素唯一的特定类型子元素。
p:only-of-type { background-color: lightblue; }
伪元素选择器（Pseudo-Element Selector）
-
伪元素选择器
- 选择元素的特定部分，如 ::before 或 ::after。
p::first-letter { font-size: 1.5em; } -
伪元素 ::before
- 在元素内容之前插入内容。
p::before { content: "Section "; } -
伪元素 ::after
- 在元素内容之后插入内容。
p::after { content: " end."; } -
伪元素 ::first-line
- 选择元素的第一行。
p::first-line { color: red; } -
伪元素 ::selection
- 选择用户选定的文本。
::selection { background: yellow; }
逻辑组合选择器
- 并集选择器（Union Selector）
- 选择匹配任何一个选择器的元素。
p, li { color: red; }
复杂选择器
-
否定选择器（Not Selector）
- 选择不匹配指定选择器的元素。
p:not(.special) { color: gray; } -
空白选择器（Empty Selector）
- 选择没有任何子节点的元素。
p:empty { display: none; } -
目标选择器（Target Selector）
- 选择带有特定锚点的目标元素。
#section:target { background-color: yellow; }
伪类选择器
-
链接伪类
- 选择未访问过的链接。
a:link { color: green; }- 选择已被访问过的链接。
a:visited { color: purple; } -
焦点伪类
- 选择获得焦点的元素。
input:focus { outline: 2px solid blue; } -
有效伪类
- 选择有效输入字段。
input:valid { border-color: green; } -
无效伪类
- 选择无效输入字段。
input:invalid { border-color: red; } -
可拖放伪类
- 选择处于拖放状态的元素。
img:drag { opacity: 0.5; } -
支持范围伪类
- 选择在指定范围内值的元素。
input:in-range { border-color: green; } -
超出范围伪类
- 选择超出指定范围值的元素。
input:out-of-range { border-color: red; } -
只读伪类
- 选择只读字段。
input:read-only { background-color: lightgray; } -
可读伪类
- 选择可读字段。
input:read-write { background-color: white; }
这些选择器可以帮助你在网页设计中精确地定位和控制各个元素的样式。熟悉并掌握这些选择器，可以使你的 CSS 更加灵活和强大。