🤩完爆就业面试必考题:CSS选择器！完整且全面的总结了CSS选择器的分类，细节的介绍了基本每一个选择器，且每个选择器的

CSS选择器的分类

基本选择器

元素选择器(标签选择器)
类选择器
ID选择器
通配符选择器

复合选择器

交集选择器(并列选择器)
并集选择器
兄弟选择器
属性选择器
子代选择器
后代选择器
伪类选择器(重要)
伪元素选择器(重要)

基本选择器

元素选择器(标签选择器)

定义和语法：元素选择器是通过 HTML 标签名称来选择元素的选择器。语法是直接使用 HTML 标签名作为选择器名称，例如p、h1、div等。
应用场景：
- 如果想让页面中所有的<p>段落标签都具有相同的字体大小，可以使用元素选择器。例如：p { font - size: 16px; }，这样，文档中的所有段落都会应用这个字体大小规则。
- 它适用于对某一类型的所有元素进行全局样式设置，如设置所有<a>链接标签的默认颜色为蓝色，可以写成a { color: blue; }。
- tagName{} 通过标签选择器前的标签名便可选中标签选择器，具体参考下例👇p即为标签名

p{
  color:red;
  }

类选择器

定义和语法：类选择器以一个点（.）开头，后面跟着类名。在 HTML 中，元素的class属性用于指定类名，可以有多个类名，用空格分隔。例如，在 HTML 中有<div class="box highlight">，可以通过.box或.highlight类选择器来选择这个元素。
应用场景：
- 假设要为具有相同样式的一组按钮设置样式。可以在 HTML 中为这些按钮添加相同的类名，如<button class="primary - button">按钮1</button>、<button class="primary - button">按钮2</button>，然后在 CSS 中使用类选择器定义样式：.primary - button { background - color: blue; color: white; padding: 10px 20px; border - radius: 5px; }，这样所有带有primary - button类名的按钮都会有相同的外观。
- 还可以用于根据功能或布局来分组元素。例如，创建一个.sidebar类用于侧边栏元素，另一个.content类用于主要内容区域元素，以便分别设置它们的样式。
- 类选择器的实现形式： <p class = "xx"></p> .xx{}

.xx{
    color:blue;
    }

ID选择器

定义和语法：ID 选择器以一个井号（#）开头，后面跟着 ID 名。在 HTML 中，ID 是唯一的，每个元素的id属性值应该在文档中独一无二。例如，对于<div id="header">这个元素，可以使用#header来选择它。
应用场景：
- 当需要为页面中的某个特定元素定义独一无二的样式时，使用 ID 选择器。比如，网站的头部区域通常是独特的，可能会有这样的 HTML 结构：<header id="main - header">，在 CSS 中可以用#main - header { height: 100px; background - color: gray; }来设置这个头部区域的高度和背景颜色等样式。
- 也用于 JavaScript 中对特定元素进行操作，因为 ID 在文档中是唯一标识，可以方便地通过getElementById方法获取元素并进行交互。
- ID选择器的实现形式:<p id = "xx"></p> #xx{}
其他：从键盘的操作上来讲，ID选择器并没有类选择器方便，但ID选择器可以选择唯一的元素

#xx{
    color:blue;
    }

通配符选择器

定义和语法
- 通配符选择器在 CSS 中用*表示，它可以匹配文档中的所有元素。其语法非常简单，就是一个星号，例如：* { margin: 0; padding: 0; }。这个规则会应用到 HTML 文档中的每一个元素，将所有元素的外边距和内边距都设置为 0。
应用场景
- 全局样式重置：这是通配符选择器最常见的用途之一。不同的浏览器对 HTML 元素有不同的默认样式，如<h1>到<h6>标题标签的字体大小、<p>段落标签的间距等。通过使用通配符选择器，可以快速地重置这些默认样式，为后续的样式设计提供一个统一的基础。
- 例如，除了前面提到的重置外边距和内边距，还可以设置box - sizing: border - box;，让所有元素在计算盒模型尺寸时更加符合预期。
- 快速检查样式问题：当你怀疑某些元素的样式受到了一些不明原因的影响时，可以使用通配符选择器临时添加一些明显的样式，如* { border: 1px solid red; }。
- 这样，所有元素都会显示一个红色边框，方便你查看元素的布局和范围，找出可能存在的样式冲突或意外继承的情况。

*{
}

HTML的全局属性(知识贯穿)

style(样式) style="key:value;key:value;"
id(唯一标识)
class(分类) 配合CSS样式一起使用

复合选择器

交集选择器(并列选择器)

紧紧贴在一起（并且）

定义和语法
- 交集选择器是将多个选择器组合在一起，用于选择同时满足这些选择器条件的元素。它的语法是把选择器直接连接在一起，中间没有空格。例如，h1.classA就是一个交集选择器，它表示选择既是<h1>标签，又具有classA这个类的元素。
应用场景
- 精准定位元素：当页面中有多种元素可能具有相同的类名，但你只想对其中某一种标签类型且带有该类名的元素进行样式设置时，交集选择器就非常有用。
- 例如，在一个网页中有多个按钮，它们都有btn这个类名，但其中的<input>类型按钮和<button>类型按钮在样式上可能需要一些区别。可以使用input.btn和button.btn这样的交集选择器来分别为它们设置样式。
- 基于标签和状态的样式设置：结合标签选择器和伪类选择器可以更精准地根据元素的状态进行样式设置。
- 例如，a:hover.visited（虽然这种写法在实际应用中可能不太符合常规逻辑，仅用于示例）表示选择已经被访问过且鼠标悬停时的链接。正常情况下更常见的是a:hover，但在某些复杂场景下，这种交集的伪类选择器组合可以提供更细致的控制。

p.beauty{
color:red;
}

并集选择器

通过逗号 (或者)

定义与语法
- 并集选择器也称为分组选择器，它允许您通过逗号（,）分隔多个选择器，然后为这些选择器所匹配的所有元素同时应用相同的样式规则。
- 例如，h1, h2, h3是一个并集选择器，它会选择文档中的所有<h1>、<h2>和<h3>元素。语法上，就是将不同的选择器用逗号依次罗列即可，这些选择器可以是元素选择器、类选择器、ID 选择器、伪类选择器等多种类型的任意组合。
应用场景
- 统一不同元素的样式
  - 当多个不同类型的元素需要具有相同的样式属性时，并集选择器非常方便。
  - 例如，在网页设计中，可能希望<h1>、<h2>和<h3>标题元素都具有相同的字体颜色和字体家族。可以使用并集选择器h1, h2, h3 { color: #333; font - family: Arial, sans - serif; }，这样就无需为每个标题标签分别编写相同的样式规则，提高了代码的效率和可维护性。
  - 对于表单元素，如<input>（文本框）、<select>（下拉框）和<textarea>（文本区域），它们在某些方面可能需要统一的样式，比如边框样式和背景颜色。通过并集选择器input, select, textarea { border: 1px solid #ccc; background - color: #fff; }可以轻松实现。
- 组合不同类型的选择器来应用样式
  - 并集选择器可以将元素选择器、类选择器和伪类选择器等组合在一起。例如，p,.highlight, a:hover这个并集选择器会选择所有的<p>元素、所有带有highlight类的元素以及鼠标悬停时的<a>元素。这在需要对多种不同类型的元素状态应用相同样式规则时很有用。
  - 比如，希望段落元素、具有突出显示类的元素以及鼠标悬停的链接都有相同的文本阴影效果，可以写成p,.highlight, a:hover { text - shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }。

h1,
span{
color:green;
}

兄弟选择器

相邻兄弟选择器（+紧邻的一个兄弟）

定义与语法
- 相邻兄弟选择器用于选择紧挨着指定元素之后的兄弟元素。语法是通过 “+” 符号连接两个选择器，例如 h2 + p，它表示选择紧挨着 <h2> 元素之后的 <p> 元素。这里的 “兄弟元素” 是指拥有相同父元素的元素。
应用场景
- 文档排版：在文档排版中，如果想让每个标题（如 <h2>）后面的第一个段落（<p>）有特殊的缩进，可以使用相邻兄弟选择器。
- 例如：h2 + p { text - indent: 20px;}，这样每个 <h2> 后的第一个 <p> 段落会有缩进效果，而其他段落不受影响，使文档结构更加清晰。
- 表单布局：在表单中，若有一个 <label> 元素后面紧跟一个 <input> 元素，可使用相邻兄弟选择器来设置它们之间的间距或对齐方式。
- 比如 label + input { margin - left: 10px;}，能让输入框与前面的标签保持一定的间距，使表单看起来更整齐。

通用兄弟选择器（~紧邻的所有兄弟）

定义与语法
- 通用兄弟选择器用 ~ 符号连接两个选择器，用于选择指定元素之后的所有兄弟元素。
- 例如 h2 ~ p 选择所有在 <h2>元素之后的 <p>元素，不管它们之间间隔了多少其他元素。
应用场景
- 样式分组设置：假设一个 <h2> 标题下有多个段落和其他元素，想要让标题后的所有段落有相同的字体颜色，可以使用通用兄弟选择器。
- 如 h2 ~ p { color: gray;}，这样在 <h2> 之后的所有 <p> 元素都会变成灰色，提供了一种对兄弟元素组进行样式控制的方式，使具有相同层次关系的元素在视觉上保持一致。
- 列表样式设置：在一个无序列表 <ul> 中，若有一个特殊的列表项 <li>（如带有特定类的列表项），可以使用通用兄弟选择器来为该列表项之后的所有列表项设置样式。
- 例如 li.special ~ li { background - color: #f2f2f2;}，会让带有 special 类的列表项之后的所有列表项都有一个浅灰色的背景。

属性选择器

基本属性选择器（[attribute]）
精确属性值选择器（[attribute = value]）
部分属性值选择器（[attribute ~= value]）
属性值开头选择器（[attribute ^= value]）
属性值结尾选择器（[attribute $= value]）
属性值包含选择器（[attribute *= value]）

定义与语法
- 基本属性选择器（[attribute]） ：使用方括号 []，括号内写上属性名称，用于选择具有指定属性的所有元素。例如 [type] 会选择带有 type 属性的元素。
- 精确属性值选择器（[attribute = value]） ：语法是 [attribute = value]，用于选择具有指定属性且属性值等于给定值的元素。如 [type = "text"] 选择 type 属性值为 text 的元素。
- 部分属性值选择器（[attribute ~ = value]） ：语法为 [attribute ~ = value]，选择具有指定属性，且属性值包含给定值（以空格分隔的单词列表）的元素。例如 [class ~ = "highlight"] 会选择 class 属性值包含 highlight 这个单词的元素。
- 属性值开头选择器（[attribute ^ = value]） ：语法是 [attribute ^ = value]，用于选择具有指定属性，且属性值以给定值开头的元素。像 [href ^ = "https://"] 选择 href 属性值以 https:// 开头的元素。
- 属性值结尾选择器（[attribute $= value])，选择具有指定属性，且属性值以给定值结尾的元素。例如 [src $= ".jpg"] 选择 “src” 属性值以 “.jpg” 结尾的元素。
- 属性值包含选择器（[attribute *= value]） ：语法是 [attribute *= value]，用于选择具有指定属性，且属性值包含给定值（任意位置）的元素。如 [title *= "important"] 选择 “title” 属性值包含 “important” 这个单词的元素。
应用场景
- 表单处理
  - 基本属性选择器可用于为所有带有某一属性（如 type）的表单元素设置共同样式，如边框样式。
  - 精确属性值选择器能够区分不同类型的表单输入元素（如文本框和密码框），为它们设置特定的背景颜色等样式。
- 链接样式设置
  - 可以使用属性值开头选择器（如 [href ^ = "https://"]）根据链接协议区分链接，为安全链接（以 “https://” 开头）添加特殊图标等样式。精确属性值选择器（如 [href = "[https://example.com](https://example.com/)"]）可用于为特定链接设置样式。
- 元素分组与区分
  - 部分属性值选择器适用于对具有多个类（通过 class 属性）的元素进行分组样式设置。
  - 例如，当一个元素有多个类，可选择其中包含特定类的元素来突出主要操作按钮等。属性值包含选择器可根据元素属性值中的关键词（如 title 属性中的关键词）来选择元素，为包含特定关键词的工具提示元素设置样式。
- 文件类型区分（针对资源元素）
  - 属性值结尾选择器在处理图片或脚本文件等资源元素时很有用。
  - 例如，通过 [src 选择格式的图片并添加边框，或者通过 = ".js"] 选择 js格式的脚本文件进行特殊操作。
- 自定义属性应用
  - 对于自定义属性（如 data - 开头的属性），基本属性选择器可用于选择带有自定义属性的元素。
  - 属性值开头、结尾或包含选择器可以根据自定义属性值的特点进行更精细的元素选择，用于设置样式或其他操作。
总括
- [属性名=""]
- ^ 以什么开头 $ 以什么结尾
- *包含某一个元素
- 属性值含有某一个字段
下面👇代码块的~=可以选择不加->[class]
可以将其换成[class = "num1"]or[class ^= "num1"]等

[class~="num1"]{
color:red;
}

子代选择器

定义与语法
- 子代选择器（也称为子元素选择器）在 CSS 中使用大于号（>）来分隔两个选择器。它用于选择作为指定元素直接子元素的元素。
- 例如，ul > li是一个子代选择器，它会选择所有<ul>元素的直接子元素<li>，而不包括<li>元素的子元素（如果有的话）。
- 语法上，符号左边的选择器代表父元素，右边的选择器代表要选择的直接子元素。
应用场景
- 导航菜单样式设置
  - 在网页的导航菜单通常是一个<ul>列表，里面的每个菜单项是<li>元素。如果只想对直接的菜单项进行样式设置，而不影响可能嵌套在菜单项中的子元素（如二级菜单），可以使用子代选择器。
  - 例如，ul > li { line - height: 30px; }，这会使每个导航菜单项有特定的行高，而不会影响到子菜单（如果存在）的行高。
  - 对于具有下拉菜单功能的导航系统，通过子代选择器可以明确地只对一级菜单选项进行样式设置，如设置一级菜单的背景颜色、字体样式等。
  - 比如，nav > ul > li { background - color: #f9f9f9; }，可以为导航栏（nav）下的<ul>列表中的直接<li>菜单项设置一个浅灰色的背景。

后代选择器

定义与语法
- 后代选择器是 CSS 中用于选择某元素内部后代元素的选择器。它由两个或多个选择器用空格分隔组成。
- 例如，article p就是一个后代选择器，它表示选择所有在<article>元素内部的<p>元素，这里的 “后代” 包括子元素、孙元素、曾孙元素等所有层次的嵌套元素。
- 从语法上来说，第一个选择器指定了一个外层元素，第二个（及后面的，如果有）选择器指定了要在前面元素内部寻找的目标元素。
应用场景
- 文档内容布局
  - 在网页设计中，对于包含文章内容的页面，通常会将文章包裹在<article>标签内。如果想对文章中的各种元素进行样式设置，如让文章中的所有图片都有相同的边框样式，可以使用后代选择器article img。然后在 CSS 中定义样式，如article img { border: 1px solid #ccc; }，这样只要是在<article>元素内部的<img>元素，不管它是<article>的直接子元素还是嵌套在更深层次的元素内部，都会应用这个边框样式。
  - 对于博客文章，文章主体部分可能包含标题（<h1> - <h6>）、段落（<p>）、引用（<blockquote>）等多种元素。使用后代选择器可以方便地对这些元素进行统一的样式调整。例如，article h2 { color: #333; font - size: 20px; }可以设置文章内部<h2>标题的颜色和字号。

伪类选择器(重要！！！)

定义与语法

伪类选择器用于定义元素在特定状态或位置下的样式。它的语法是在选择器后面加上冒号（:）和伪类名称。例如，a:link用于选择未被访问的链接，a:hover用于选择鼠标悬停其上的链接。常见的伪类包括以下几种：
- 链接相关伪类
  - :link：选择未被访问的链接。语法为a:link（通常用于<a>标签），例如，a:link { color: blue; }会设置未访问链接的颜色为蓝色。
  - :visited：选择已经访问过的链接。由于安全和隐私原因，在样式上可操作的属性相对有限，主要是一些颜色相关属性。例如，a:visited { color: purple; }。
- 用户交互伪类
  - :hover：选择鼠标悬停其上的元素。适用于各种元素，如button:hover { background - color: gray; }会使鼠标悬停在按钮上时改变背景颜色。
  - :active：选择被激活的元素，通常是鼠标按下未松开时的状态。例如，a:active { text - decoration: none; }。

应用场景

提升用户交互体验
- 导航菜单效果：在网页导航菜单中，使用:hover伪类可以为菜单项提供鼠标悬停效果。例如，当鼠标悬停在导航链接上时，可以改变其背景颜色、文字颜色或者添加下划线，让用户清楚地知道当前鼠标指向的菜单项可以点击。
- 按钮交互样式：对于表单中的按钮或页面中的操作按钮，通过:hover和:active伪类，可以让按钮在鼠标悬停和按下时产生视觉变化。比如，鼠标悬停时按钮背景色变深，按下时按钮产生内陷效果，增强用户与按钮交互的反馈感。

记忆小技巧

LV HA（买了LV包很开心）

伪元素选择器(重要！！！)

定义与语法

伪元素选择器用于选择元素的特定部分，它们在文档树中并不实际存在，但可以通过 CSS 来创建和样式化。主要的伪元素包括：
- ::before：用于在元素内容之前插入内容。语法为element::before，其中element是要添加伪元素的目标元素。例如，p::before表示在每个<p>段落内容之前插入内容。需要注意的是，在使用::before伪元素时，通常需要通过content属性来定义要插入的内容，如p::before { content: "前置内容"; color: gray; }，这会在每个<p>段落内容之前添加一个灰色的 “前置内容” 字样。
- ::after：在元素内容之后插入内容，语法是element::after。例如，div::after会在每个<div>元素内容之后插入内容。同样，要使用content属性指定插入的内容，如div::after { content: ""; display: block; height: 10px; background - color: black; }，会在每个<div>元素内容之后添加一个高度为 10px 的黑色块。
- ::first - letter：选择元素内容的第一个字母。语法为element::first - letter，例如，p::first - letter { font - size: 24px; font - weight: bold; }会使每个段落的第一个字母变大加粗。
- ::first - line：选择元素内容的第一个行。语法是element::first - line，例如，h1::first - line { text - transform: uppercase; }会使标题的第一行全部转换为大写字母。

应用场景

排版和装饰性元素添加
- 引号添加：在引用块（如<blockquote>）的前后添加引号是::before和::after伪元素的常见应用。例如，可以通过以下 CSS 代码在引用内容的前后添加引号：

.quote::before {  
content: "“";  
color: #666;  
}  
.quote::after {  
content: "”";  
color: #666;  
}
这样，所有带有`quote`类的元素（如引用块）在内容的前后就会有灰色的引号。

文本样式精细化控制
- 首字下沉效果：::first - letter伪元素可以用于制作首字下沉效果。例如，对于文章中的段落，可以通过以下方式实现首字下沉：::first - letter伪元素可以用于制作首字下沉效果。例如，对于文章中的段落，可以通过以下方式实现首字下沉：

.article - p::first - letter {  
float: left;  
font - size: 36px;  
line - height: 1;  
margin - right: 10px;  
}
这会使带有`article - p`类的段落的第一个字母下沉，并且可以设置其大小、行高和与其他文字的间距等。

总括

像是元素，但不是元素
理解为某些元素的某些位置
语法通过两个冒号::
before after first-letter first-line