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>元素的文字颜色设置为灰色。