CSS 选择器

/* Key Selector: .item */
.header .nav .menu .item { color: red; }

/* Key Selector: div */
.container > div { margin: 10px; }

/* Key Selector: a */
article a:hover { text-decoration: underline; }

// 浏览器内部伪代码
selectorIndex = {
  '.header': [div.header, header.header],
  '.nav': [nav.nav, ul.nav],
  '#main': [div#main],
  'p': [p, p, p, ...]  // 所有 p 元素
}

/* 如果页面没有 .sidebar 元素，这条规则会被快速跳过 */
.sidebar .widget .title { color: blue; }

/* 如果页面没有 #admin 元素，这条规则也会被跳过 */
#admin .panel { background: red; }

/* 第一次匹配：计算并缓存 */
.button { padding: 10px 20px; }

/* DOM 未变化时：直接使用缓存 */
.button { padding: 10px 20px; }

/* 浅层选择器 - 0.18ms */
.button { }

/* 2层嵌套 - 0.42ms */
.nav .button { }

/* 3层嵌套 - 0.85ms */
.header .nav .button { }

/* 4层嵌套 - 1.65ms */
.container .header .nav .button { }

/* 5层嵌套 - 3.20ms */
.page .container .header .nav .button { }

/* 全局通配符 - 匹配所有元素，性能最差 */
* { box-sizing: border-box; }

/* 限定范围的通配符 - 性能提升 60% */
.container * { margin: 0; }

/* 替代方案：明确指定元素 - 性能最佳 */
.container p, .container div, .container span { margin: 0; }

// 创建 Shadow DOM
const host = document.querySelector('#my-component');
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>
    /* 这些样式只作用于 Shadow DOM 内部 */
    .content { color: blue; }
    p { font-size: 16px; }
  </style>
  <div class="content">
    <p>这是 Shadow DOM 内部的内容</p>
  </div>
`;

/* 选择宿主元素 */
:host {
  display: block;
  padding: 20px;
  background: #f5f5f5;
}

/* 带条件的 :host */
:host(.active) {
  background: #007bff;
  color: white;
}

/* :host 与伪类结合 */
:host(:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

<!-- 外部 HTML -->
<my-component class="active"></my-component>

<!-- Shadow DOM 内部 -->
<style>
  :host(.active) { background: blue; }
</style>

/* 当宿主在 .dark-theme 上下文中时 */
:host-context(.dark-theme) {
  background: #333;
  color: white;
}

/* 当宿主在 .light-theme 上下文中时 */
:host-context(.light-theme) {
  background: white;
  color: #333;
}

/* 根据语言环境调整 */
:host-context([lang="zh"]) {
  font-family: "PingFang SC", sans-serif;
}

<!-- 外部使用 -->
<my-component>
  <p slot="content">这是外部内容</p>
  <span>未命名的 slot 内容</span>
</my-component>

/* Shadow DOM 内部 */
<style>
  /* 选择所有 slotted 内容 */
  ::slotted(*) {
    margin: 10px;
    padding: 5px;
  }

  /* 选择特定标签的 slotted 内容 */
  ::slotted(p) {
    color: blue;
    font-weight: bold;
  }

  /* 选择特定 slot 的内容 */
  ::slotted([slot="content"]) {
    background: #f0f0f0;
  }

  /* 选择带有特定类的 slotted 内容 */
  ::slotted(.highlight) {
    background: yellow;
  }
</style>

<slot name="content"></slot>
<slot></slot>

/* ❌ 这些选择器都无法选中 Shadow DOM 内部的元素 */
my-component .content { }
my-component p { }
#my-component > div { }

/* ✅ CSS 自定义属性可以穿透 */
:root {
  --primary-color: blue;
}

/* Shadow DOM 内部可以使用外部定义的变量 */
:host {
  color: var(--primary-color);
}

/* ✅ 继承属性可以穿透 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Shadow DOM 内部元素会继承这些属性 */

/* 1. 使用 :host 定义宿主基础样式 */
:host {
  display: block;
  contain: content;
}

/* 2. 使用 CSS 变量实现主题定制 */
:host {
  --component-bg: #fff;
  --component-color: #333;
  background: var(--component-bg);
  color: var(--component-color);
}

/* 3. 使用 ::slotted() 控制外部内容样式 */
::slotted(*) {
  margin: 0;
  padding: 8px;
}

/* 4. 避免过度使用 :host-context() */
/* 推荐通过 CSS 变量传递主题，而非依赖祖先选择器 */

/* 设置所有段落的默认样式 */
p {
  color: blue;
  line-height: 1.6;
}

/* 设置所有链接的基础样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 设置所有图片的响应式 */
img {
  max-width: 100%;
  height: auto;
}

/* 单个类选择器 */
.highlight {
  background-color: yellow;
  padding: 2px 4px;
}

/* 多个类选择器组合（同时包含两个类） */
.button.primary {
  background-color: blue;
  color: white;
}

/* 类选择器与元素选择器组合 */
button.submit {
  background: green;
  padding: 10px 20px;
}

<!-- 单个类 -->
<p class="highlight">高亮文本</p>

<!-- 多个类（空格分隔） -->
<button class="button primary">主要按钮</button>

<!-- 类选择器的复用性 -->
<div class="highlight">这个也高亮</div>
<span class="highlight">这个也高亮</span>

#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* 清除所有元素的默认内外边距 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 选择某元素下的所有子元素 */
.container * {
  font-family: inherit;
}

/* 选择 article 内的所有段落 */
article p {
  color: #333;
  margin-bottom: 1em;
}

/* 选择导航内的所有链接 */
nav a {
  display: inline-block;
  padding: 5px 10px;
}

<article>
  <p>这个段落会被选中</p>
  <div>
    <p>这个段落也会被选中（孙元素）</p>
  </div>
</article>
<p>这个段落不会被选中</p>

/* 只选择 div 的直接子元素 p */
div > p {
  color: red;
  font-weight: bold;
}

/* 选择列表的直接子项 */
ul > li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

<div>
  <p>这个段落会被选中（直接子元素）</p>
  <section>
    <p>这个段落不会被选中（孙元素）</p>
  </section>
</div>

/* 选择紧跟在 h1 后的段落 */
h1 + p {
  margin-top: 0;
  font-size: 1.1em;
}

/* 表单标签与输入框的间距 */
label + input {
  margin-left: 10px;
}

<h1>标题</h1>
<p>这个段落会被选中（紧跟在 h1 后）</p>
<p>这个段落不会被选中（不是紧邻）</p>

/* 选择 h1 后面的所有段落 */
h1 ~ p {
  color: gray;
}

/* 复选框选中后显示内容 */
.checkbox:checked ~ .content {
  display: block;
}

<h1>标题</h1>
<p>这个段落会被选中</p>
<div>其他内容</div>
<p>这个段落也会被选中</p>

/* 选择所有包含 disabled 属性的元素 */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 选择所有包含 data-* 自定义属性的元素 */
[data-tooltip] {
  position: relative;
  cursor: help;
}

/* 属性包含某词（完整单词，空格分隔） */
[class~="box"] { padding: 10px; }
/* HTML: <div class="box container"> 或 <div class="box"> */

/* 属性以某值开头 */
[href^="https"] { color: green; }
[href^="mailto:"] {
  background: url("mail-icon.png") left center no-repeat;
  padding-left: 20px;
}

/* 属性以某值结尾 */
[href$=".pdf"] {
  color: red;
  background: url("pdf-icon.png") right center no-repeat;
  padding-right: 20px;
}

/* 属性包含某子串 */
[href*="example"] { font-weight: bold; }
[class*="button-"] {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
}

/* 外部链接标识 */
a[href^="http"]:not([href*="mysite.com"])::after {
  content: " ↗";
  color: #999;
}

/* 安全链接图标 */
a[href^="https://"]::before {
  content: "🔒 ";
}

/* 不同类型文件的下载图标 */
a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: #999;
}

/* 响应式图片处理 */
img[loading="lazy"] {
  background: #f0f0f0;
}

/* 语言选择 */
[lang|="zh"] {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 未访问的链接 */
a:link { color: blue; text-decoration: underline; }

/* 已访问的链接 */
a:visited { color: purple; }

/* 鼠标悬停 */
a:hover { color: red; text-decoration: none; }

/* 激活状态（点击瞬间） */
a:active { color: orange; }

/* 完整按钮示例 */
.button:link {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}

.button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

.button:active {
  transform: translateY(0);
}

/* 元素获得焦点 */
input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  outline: none;
}

/* 仅键盘焦点（避免鼠标点击时出现焦点框） */
button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 焦点在元素内部（容器级焦点） */
.container:focus-within {
  border-color: #007bff;
  background-color: #f8f9fa;
}

/* 第一个子元素 */
li:first-child { font-weight: bold; border-top: none; }

/* 最后一个子元素 */
li:last-child { border-bottom: none; margin-bottom: 0; }

/* 唯一子元素 */
p:only-child { font-size: 18px; text-align: center; }

/* 第一个该类型的子元素 */
p:first-of-type { font-size: 1.2em; }

/* 最后一个该类型的子元素 */
p:last-of-type { margin-bottom: 0; }

/* 唯一该类型的子元素 */
img:only-of-type { display: block; margin: 0 auto; }

/* 使用数字 */
li:nth-child(2) { color: red; }

/* 使用关键字 */
li:nth-child(odd) { background: #f0f0f0; }   /* 奇数 */
li:nth-child(even) { background: #fff; }      /* 偶数 */

/* 使用公式 (an + b) */
li:nth-child(3n) { color: blue; }             /* 第3、6、9...个 */
li:nth-child(3n + 1) { color: green; }        /* 第1、4、7...个 */
li:nth-child(n + 5) { border-top: 1px solid #eee; } /* 第5个及之后 */
li:nth-child(-n + 3) { font-weight: bold; }   /* 前3个 */
li:nth-child(3n-1) { background: yellow; }    /* 第2、5、8...个 */

<div>
  <h1>标题</h1>
  <p>段落1</p>  <!-- p:nth-child(2)，p:nth-of-type(1) -->
  <p>段落2</p>  <!-- p:nth-child(3)，p:nth-of-type(2) -->
  <span>文本</span>
  <p>段落3</p>  <!-- p:nth-child(5)，p:nth-of-type(3) -->
</div>

/* nth-child 计算所有子元素中的位置 */
p:nth-child(2) { color: red; }     /* 选择第2个子元素，且必须是 p */

/* nth-of-type 只计算同类型元素中的位置 */
p:nth-of-type(2) { color: blue; }  /* 选择第2个 p 元素 */

/* 禁用状态 */
input:disabled { opacity: 0.5; cursor: not-allowed; background-color: #f5f5f5; }

/* 必填字段 */
input:required { border-left: 3px solid red; }

/* 选填字段 */
input:optional { border-left: 3px solid #ccc; }

/* 单选框/复选框选中 */
input:checked { accent-color: #007bff; }

/* 验证通过 */
input:valid { border-color: #28a745; }

/* 验证失败 */
input:invalid { border-color: #dc3545; }

/* 用户输入时验证（避免页面加载时就显示错误） */
input:focus:invalid { border-color: #dc3545; }

/* 排除特定元素 */
li:not(:last-child) { border-bottom: 1px solid #eee; }

/* 排除多个条件（CSS Selectors Level 4 新语法） */
input:not([type="radio"], [type="checkbox"]) { width: 100%; }

.button:not(.disabled, .loading) { cursor: pointer; }

/* 旧写法：链式 :not() */
input:not([type="radio"]):not([type="checkbox"]) { width: 100%; }

/* URL 中包含锚点时激活 */
section:target {
  background-color: #fff3cd;
  animation: highlight 2s ease-in-out;
}

@keyframes highlight {
  from { background-color: #ffc107; }
  to { background-color: transparent; }
}

/* 添加图标 */
.external-link::after {
  content: " ↗";
  color: #007bff;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 装饰性元素 */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #007bff, #0056b3);
}

/* 悬停提示 */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #333; color: white;
  font-size: 14px; white-space: nowrap;
  border-radius: 4px;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
}
.tooltip:hover::after {
  opacity: 1; visibility: visible;
}

/* 必填标记 */
.required::after {
  content: " *";
  color: #dc3545;
}

/* 面包屑分隔符 */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 8px;
  color: #999;
}

/* 选中文本样式 */
::selection {
  background-color: #007bff;
  color: white;
}

/* 占位符样式 */
input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 1; /* Firefox 默认透明度较低 */
}

/* 列表标记样式 */
ul li::marker { color: #007bff; font-size: 1.2em; }
ol li::marker { color: #28a745; font-weight: bold; }

/* 自定义列表符号 */
ul.custom li::marker { content: "✓ "; color: #28a745; }

/* 权重: 0,0,0,1 */
p { color: black; }

/* 权重: 0,0,1,0 */
.text { color: blue; }

/* 权重: 0,0,1,1 (类 + 元素) */
p.text { color: green; }

/* 权重: 0,1,0,0 */
#intro { color: red; }

/* 权重: 0,1,1,1 (ID + 类 + 元素) */
div.container#intro { color: orange; }

/* 权重: 0,0,3,0 */
.header .nav .menu .item { color: blue; }

/* 权重: 0,1,1,2 */
#main .content article p { color: green; }

/* :is() 使用参数中最高的优先级 */
:is(#id, .class) {
  /* 权重: 0,1,0,0 (取 ID 的权重) */
  color: red;
}

/* :where() 优先级始终为 0 */
:where(#id, .class) {
  /* 权重: 0,0,0,0 */
  color: blue;
}

/* 实际应用 */
:where(article, section) p {
  /* 权重: 0,0,0,1 */
  margin: 1em 0;
}

/* 覆盖更容易 */
article p {
  /* 权重: 0,0,0,2 - 会覆盖上面的样式 */
  margin: 2em 0;
}

/* 传统写法 */
header a, nav a, footer a { color: blue; }

/* 使用 :is() */
:is(header, nav, footer) a { color: blue; }

/* 复杂示例 */
:is(article, section, aside) :is(h1, h2, h3) { margin-top: 1.5em; }

/* 配合状态 */
button:is(:hover, :focus) { opacity: 0.8; }

/* 表单元素 */
input:is([type="text"], [type="email"], [type="password"]) {
  padding: 10px;
  border: 1px solid #ccc;
}

/* 基础样式 - 优先级为 0 */
:where(article, section) p { margin: 1em 0; color: #333; }

/* 容易覆盖 */
article p { color: blue; /* 会覆盖上面的 color */ }

/* 实际应用：CSS 重置 */
:where(h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(ul, ol) { list-style: none; padding: 0; }

/* 选择包含图片的链接 */
a:has(img) { display: block; border: 1px solid #eee; }

/* 选择包含错误的表单 */
form:has(:invalid) { border: 2px solid #dc3545; }

/* 选择有图片的段落 */
p:has(img) { text-align: center; }

/* 选择后续有段落的标题 */
h2:has(+ p) { margin-bottom: 0.5em; }

/* 选择子元素被选中的标签 */
label:has(input:checked) { font-weight: bold; color: #007bff; }

.card {
  padding: 1rem;
  background: #fff;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  & .content {
    font-size: 1rem;
    line-height: 1.6;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &--featured {
    border-left: 4px solid #007bff;
  }
}

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked />
  <input type="radio" name="tab" id="tab2" />
  <input type="radio" name="tab" id="tab3" />

  <label for="tab1">标签一</label>
  <label for="tab2">标签二</label>
  <label for="tab3">标签三</label>

  <div class="panel panel-1">内容一</div>
  <div class="panel panel-2">内容二</div>
  <div class="panel panel-3">内容三</div>
</div>

.tabs input { display: none; }

/* 默认隐藏所有面板 */
.panel { display: none; }

/* :checked 驱动对应面板显示 */
#tab1:checked ~ .panel-1 { display: block; }
#tab2:checked ~ .panel-2 { display: block; }
#tab3:checked ~ .panel-3 { display: block; }

/* 标签激活样式 */
#tab1:checked ~ label[for="tab1"],
#tab2:checked ~ label[for="tab2"],
#tab3:checked ~ label[for="tab3"] {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

/* 输入框未输入时不显示错误 */
input:not(:placeholder-shown):invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

input:not(:placeholder-shown):valid {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* 错误提示：输入后且非法时显示 */
.error-msg { display: none; color: #dc3545; }
input:not(:placeholder-shown):invalid ~ .error-msg { display: block; }

<form>
  <div class="field">
    <input type="email" required placeholder="请输入邮箱" />
    <span class="error-msg">邮箱格式不正确</span>
  </div>
</form>

/* ✅ 推荐：BEM 命名 */
.card { }
.card__title { }
.card__image { }
.card--featured { }

/* ❌ 不推荐：深层嵌套 */
.container .wrapper .content .article .title { }

/* ✅ 推荐：扁平化选择器 */
.article__title { }

/* ❌ 不推荐 - 先匹配所有 a，再筛选 */
.header a { }

/* ✅ 推荐 - 使用类选择器 */
.header-link { }

/* ❌ 不推荐 - 先匹配所有 *，再筛选 */
.container * { }

/* ✅ 推荐 - 限定元素类型 */
.container p, .container span { }

/* ❌ 差：Key Selector 是标签选择器，匹配所有 div */
.content .wrapper > div { }

/* ✅ 好：Key Selector 是类选择器，精确匹配 */
.content .wrapper > .card { }

/* ❌ 差：Key Selector 是通配符 */
.sidebar * { }

/* ✅ 好：明确指定元素类型 */
.sidebar p, .sidebar ul, .sidebar li { }

/* ❌ 差：Key Selector 是伪类 */
.list :hover { }

/* ✅ 好：明确指定元素 */
.list-item:hover { }

/* ❌ 性能差：4层嵌套，匹配成本高 */
.page .container .content .article .title { }

/* ✅ 性能好：扁平化，使用 BEM 命名 */
.article__title { }

/* ❌ 性能差：匹配页面所有元素 */
* { margin: 0; padding: 0; }

/* ✅ 性能好：明确指定元素 */
body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
}

/* ✅ 或者使用 :where() 降低优先级影响 */
:where(body, h1, h2, h3, p, ul, li) {
  margin: 0;
  padding: 0;
}

/* ❌ 性能差：模糊匹配所有 class */
[class*="btn"] { }

/* ✅ 性能好：精确匹配 */
.btn, .btn-primary, .btn-secondary { }

/* ✅ 或者使用 BEM 命名规范 */
[class^="btn-"] { }  /* 以 btn- 开头，性能优于 * 匹配 */

/* ❌ 传统写法：多条规则，重复声明 */
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 2rem; }

/* ✅ 使用 :is() 合并规则 */
:is(h1, h2, h3) { font-size: 2rem; }

/* ✅ 使用 :where() 实现零权重基础样式 */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: normal;
  line-height: 1.5;
}

/* ❌ 差：hover 时触发深层选择器重新计算 */
.container .nav .item:hover .submenu { }

/* ✅ 好：扁平化，减少匹配范围 */
.nav-item:hover .nav-submenu { }

/* ✅ 更好：使用 CSS 变量避免重排 */
.nav-item {
  --submenu-opacity: 0;
  --submenu-visibility: hidden;
}

.nav-item:hover {
  --submenu-opacity: 1;
  --submenu-visibility: visible;
}

.nav-submenu {
  opacity: var(--submenu-opacity);
  visibility: var(--submenu-visibility);
  transition: opacity 0.2s, visibility 0.2s;
}

# 使用 Lighthouse CLI 审计
lighthouse https://example.com --only-categories=performance

# 关注指标：
# - Total Blocking Time (TBT)
# - Largest Contentful Paint (LCP)
# - Cumulative Layout Shift (CLS)

// 测量样式计算时间
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    if (entry.name === 'layout-shift' || entry.name === 'largest-contentful-paint') {
      console.log(`${entry.name}: ${entry.startTime}ms`);
    }
  });
});

observer.observe({ entryTypes: ['layout-shift', 'largest-contentful-paint'] });

□ 选择器嵌套层级不超过 3 层
□ Key Selector 使用类选择器或 ID 选择器
□ 避免通配符作为 Key Selector
□ 减少属性选择器的模糊匹配（*=, ^=, $=）
□ 使用 :is() 和 :where() 合并重复规则
□ 避免在高频交互元素上使用深层选择器
□ 定期使用 Performance 面板检测样式计算开销
□ 大型项目使用 CSS Modules 或 CSS-in-JS 实现样式隔离
□ 使用 BEM 命名规范保持选择器扁平化
□ 避免使用 !important，通过合理的选择器设计解决优先级问题

/* 原因1：优先级被覆盖 */
.text { color: blue; }        /* 0,0,1,0 */
#content .text { color: red; } /* 0,1,1,0 - 生效 */

/* 原因2：顺序问题 */
.text { color: blue; }
.text { color: red; }  /* 后定义的生效 */

/* 原因3：选择器不匹配 */
div.text { }  /* 只匹配 <div class="text"> */
p.text { }    /* 不会匹配 <div class="text"> */

/* nth-child：计算所有子元素中的位置 */
p:nth-child(2) { }  /* 选择第2个子元素，且必须是 p */

/* nth-of-type：只计算同类型元素中的位置 */
p:nth-of-type(2) { } /* 选择第2个 p 元素 */

/* 方案1：提高选择器权重 */
#app .third-party-class { color: red; }

/* 方案2：使用 !important（不推荐，但有时必要） */
.third-party-class { color: red !important; }

/* 方案3：使用 @layer 管理优先级 */
@layer third-party, my-styles;