css 选择器、伪类、规则

感觉脑子越来越不好使了

又不是不会用，但每次还是习惯性的查一下，索性自己整理记录一份以便查询罢了

内容或有不全，我将持续更新

:is() 选择器 / :where() 选择器

选择器可以将多个选择器分组

/* 之前的写法 */
header p, main p, footer p {
    color: green;
}
/* 使用:is()的写法 */
:is(header, main, footer) p {
    color: red;
}
/* 使用:where()的写法 */
:where(header, main, footer) p {
    color: orange;
}

要理解 :is() 和 :where() 之间的差异，首先要理解“特异性（Specificity）”

特异性（Specificity）= 标签的特异性（如：div）+ 类的特异性（如：.active），:where() 选择器的特异性是 0

/* 特异性 = div 的特异性 + .active 的特异性 = 1,1,0 */
:is(div, .active) {
    color: red;  /* 特异性较高 */
}
/* 特异性 = 0,0,0，容易被覆盖 */
:where(div, .active) {
    color: blue; /* 特异性始终为 0 */
}
/* 特异性 0,1,0 */
.card {
    color: green; // 
}

至此因为特异性的差异，.card 可以覆盖 :where 设定的样式，而无法覆盖 :is 的样式

:has() 选择器

基于子元素选择父元素

/* 选择包含图片的段落 */
p:has(img) {}

:nth-child() 选择器

/* 选择第四个之后的所有元素 */
li:nth-child(n+4) {}

/* 选择前五个元素 */
li:nth-child(-n+5) {}

/* 选择奇数行 */
li:nth-child(odd) {}

/* 选择奇数行 */
li:nth-child(even) {}

:first-child 选择器

匹配作为其父元素第一个子元素的元素

last-child 选择器

匹配作为其父元素最后一个子元素的元素

:lang(language) 选择器

根据元素的语言属性应用样式

:not() 选择器

多条件排除选择器，支持多个选择器

div:not(.excluded, .special, [data-type="temp"]) {}

:focus 伪类 / :focus-visible 伪类

:focus 和 :focus-visible 的区别：

:focus 无论你是用鼠标点击还是键盘切换，只要元素被聚焦，它就显示焦点样式（比如边框高亮）
:focus-visible 只有用户用 Tab 键等键盘方式导航时，才显示焦点样式。鼠标点击时则不显示

/*
使用 :focus-visible 可以避免用户点击按钮后出现焦点环，防止产生“按钮被选中”的视觉错觉，但键盘用户仍能清晰地看到哪个按钮当前有焦点。
*/
input:focus {
  outline: none; // 移除默认的、可能难看的轮廓
}
input:focus-visible {
  outline: 2px solid #4a90e2;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
}

:empty 伪类

用于匹配没有任何子元素（包括文本节点）的每个元素

<style> 
.box {
  background-color: lightgreen;
  height: 90px;
  width: 90px;
}
.box:empty {
  background-color: salmon;
}
</style>

<div class="box"></div>
<div class="box">我会是浅绿色。</div>
<div class="box"><!-- 我会是橙红色 --></div>
<div class="box"> <!-- 我会是浅绿色 --> </div> // 该行有空文本节点，故呈浅绿色

:enabled 伪类 / :disabled 伪类

:enabled 选择并设置任何启用元素的样式

:disabled 选择并设置任何禁用元素的样式

<style> 
input:enabled {
  background-color: yellow;
}
input:disabled {
  background-color: lightgray;
}
</style>

<input id="name" name="name" type="text" />
<input id="country" name="country" type="text" disabled />

:root 伪类

匹配文档的根元素

:link 伪类

未访问的链接

:visited 伪类

已访问的链接

:hover 伪类

鼠标悬停在元素上时触发

:active 伪类

元素被激活（如鼠标点击）时应用

＞＞＞、/deep/、::v-deep、::v-deep() 和 :deep()

解决修改子组件内部样式无法穿透作用域边界

* 通配符匹配

/* 选择所有数据属性 */
[data-*="important"] {
    font-weight: bold;
}

相邻兄弟选择器组合

/* 选择相邻的同级列表项 */
li + li {}

/* 选择之后的所有同级段落 */
h2 ~ p {}

@layer 层叠层级管理

规则可用于控制 CSS 层叠层（cascade layers）评估样式的顺序

通俗的解释就是：

没有 @layer 的情况 → 所有员工平级，谁嗓门大（选择器特异性高）谁说了算，管理混乱

有了 @layer 的情况 → 你设置了明确的权力等级：实习生 < 正式员工 < 经理。即使实习生嗓门再大（选择器写得更具体），也不能越级指挥经理

它解决一个页面在同时引入多个样式，且每个样式中存在相同样式的问题，避免频繁通过设置 !important 或 堆叠样式层级 出现的失控现象，说明如下：

/* 第三方组件库的样式（写得很具体） */
.card .title .text {
  color: blue;
}

/* 我们自己想覆盖 */
body .page .card .title .text { // 靠堆叠样式层级覆盖第三方样式
  color: red !important; /* 被迫用 !important 覆盖第三方样式 */
}

使用方法：

/* 先声明权力等级：最低级 ← 最高级 */
@layer 第三方库, 业务组件, 主题定制;

/* 如果是外部引入的样式，则通过 layer 规定别名 */
@import url('第三方库.css') layer(第三方库)

/* 第三方库的样式（哪怕写得很长） */
@layer 业务组件 {
  .card .title .text {
    color: blue; // 权力等级低，容易被覆盖
  }
}

/* 我们的样式（写得简单也能覆盖） */
@layer 主题定制 {
  .text {
    color: red; // 权力等级高，轻松覆盖
  }
}

/* 不在任何层里的样式：权力最高 */
.text {
    color: green; // 显示绿色，因为它没在层里
}

应用场景：

/* 基础主题 */
@layer 默认主题 {
  :root { --primary: blue; }
}

/* 深色主题（更高权力等级） */
@layer 深色主题 {
  @media (prefers-color-scheme: dark) {
    :root { --primary: darkblue; }
  }
}

/* 用户自定义主题（最高权力） */
@layer 用户自定义 {
  :root { --primary: purple; }
}

@layer 与 !important 的「权力反转」

以下代码正常情况：权力等级高的层赢
有 !important 时：权力等级反转，低层的 !important 比高层的 !important 更强

@layer 低层 {
  .btn {
    color: red !important; /* 低层用!important */
  }
}

@layer 高层 {
  .btn {
    color: blue !important; /* 高层用!important */
  }
}

@media 规则 / @container 规则

@media 用于根据设备或浏览器的特性（如视口宽度、高度或设备类型）应用不同的样式

@container 用于根据容器的大小或样式为其他元素定义样式|

@media screen and (min-width: 900px) {
  .child {}
}

@container myContainer (width < 900px) { // myContainer 容器的名称
  .child {}
}