CSS中选择器有哪些?(史上最全选择器)
CSS选择器是用来选择和应用样式到HTML元素上的工具。以下是所有主要的CSS选择器的详细分类和描述：
1. 基本选择器
- 通配符选择器 (
*)：选择所有元素。例如，* { color: red; }会将所有元素的文字颜色设置为红色。 - 元素选择器：选择指定类型的元素。例如，
p { margin: 0; }会将所有<p>元素的外边距设置为0。 - 类选择器 (
.)：选择所有具有指定类的元素。例如，.class-name { color: blue; }会将所有具有class-name类的元素的文字颜色设置为蓝色。 - ID选择器 (
#)：选择具有指定ID的单个元素。例如，#element-id { font-size: 16px; }会将ID为element-id的元素的字体大小设置为16px。 - 属性选择器 (
[attr])：选择具有指定属性的元素。例如，[type="text"] { border: 1px solid black; }会将所有type属性值为text的元素边框设置为黑色实线。
2. 组合选择器
- 后代选择器 (
div p { color: green; }会将所有在<div>内部的<p>元素文字颜色设置为绿色。 - 子选择器 (
>)：选择某元素的直接子元素。例如，ul > li { list-style-type: none; }会将所有<ul>的直接子<li>元素的列表样式设置为无。 - 相邻兄弟选择器 (
+)：选择某元素后紧跟的相邻兄弟元素。例如，h1 + p { margin-top: 0; }会将紧跟在<h1>后面的<p>元素的上外边距设置为0。 - 通用兄弟选择器 (
~)：选择某元素后面所有的兄弟元素。例如，h1 ~ p { color: purple; }会将所有<h1>后面的<p>元素的文字颜色设置为紫色。
3. 伪类选择器
-
结构性伪类：
:first-child：选择作为其父元素的第一个子元素的元素。例如，p:first-child { font-weight: bold; }会将父元素的第一个<p>子元素的文字加粗。:last-child：选择作为其父元素的最后一个子元素的元素。:nth-child(n)：选择作为其父元素的第n个子元素的元素。例如，li:nth-child(2) { color: red; }会将第二个<li>元素的文字颜色设置为红色。:nth-of-type(n)：选择父元素中第n个指定类型的元素。:not(selector)：选择不匹配指定选择器的元素。例如，:not(.special) { color: gray; }会将所有没有special类的元素文字颜色设置为灰色。
-
伪元素：
::before：在指定元素的内容之前插入内容。例如，p::before { content: "Note: "; color: blue; }会在每个<p>元素的内容前插入“Note: ”。::after：在指定元素的内容之后插入内容。例如，p::after { content: "."; }会在每个<p>元素的内容后插入一个句号。::first-line：选择元素的第一行文本。::first-letter：选择元素的第一字母。
4. 属性选择器的变体
[attr=value]：选择具有指定属性值的元素。例如，input[type="text"]选择type属性值为text的<input>元素。[attr^="value"]：选择属性值以指定值开头的元素。例如，a[href^="https"]选择所有href属性以https开头的<a>元素。[attr$="value"]：选择属性值以指定值结尾的元素。例如，img[src$=".jpg"]选择所有src属性以.jpg结尾的<img>元素。[attr*="value"]：选择属性值包含指定值的元素。例如，a[href*="example"]选择所有href属性中包含example的<a>元素。
5. 组合选择器
- 相邻兄弟选择器 (
+)：选择紧接在指定元素之后的元素。例如，h2 + p { margin-top: 0; }会将紧跟在<h2>后面的<p>元素的上外边距设置为0。 - 一般兄弟选择器 (
~)：选择指定元素之后的所有兄弟元素。例如，h2 ~ p { color: gray; }会将所有在<h2>之后的<p>元素的文字颜色设置为灰色。