一些CSS3的关键字/语法

CSS3 引入了许多新的语法关键字和特性，用于增强样式表的灵活性和功能性。以下是对 CSS3 常用语法关键字的总结，包括用法、示例和说明，涵盖如 &、@ 规则、var、media、import、&:where 等常见写法，力求全面且简洁。对于 CSS3 的所有关键字，我会列出主要类别和常见用法，并提供实际代码示例。由于 CSS3 语法庞大，我会重点总结常用部分，并确保内容清晰易懂。

CSS3 部分语法关键字概览

选择器相关：如 &（嵌套选择器）、:where()、:is()、:not() 等。
@ 规则：如 @media、@import、@keyframes、@font-face 等。
变量：如 var() 和 --* 自定义属性。
伪类与伪元素：如 :hover、:first-child、::before 等。
函数：如 calc()、min()、max()、clamp() 等。
单位与值：如 rem、vw、vmin、var() 等。

选择器相关关键字

CSS3 扩展了选择器的功能，特别是在嵌套（借助预处理器如 SCSS 或原生 CSS 嵌套）和高级选择器方面。

1. `&`（嵌套选择器）

用法：在嵌套规则中表示父选择器，常用于 CSS 预处理器（如 SCSS），也支持原生 CSS 嵌套（部分浏览器已支持）。
功能：简化选择器书写，避免重复父选择器。

示例（SCSS 风格，原生 CSS 嵌套类似）：

.button {
  background: blue;
  &:hover {
    background: darkblue; /* 等价于 .button:hover */
  }
  &.active {
    border: 1px solid red; /* 等价于 .button.active */
  }
}

2. `:where()`

用法：接受一组选择器列表，匹配满足任一选择器的元素，增强选择器组合的灵活性。
功能：简化复杂选择器，提高可读性。

示例：

p:where(.highlight, .error) {
  color: red; /* 匹配 p.highlight 或 p.error */
}

3. `:is()`

用法：类似 :where()，但更简洁，匹配任一选择器。
功能：减少重复选择器，提高可维护性。

示例：

:is(h1, h2, h3).title {
  font-size: 2rem; /* 匹配 h1.title, h2.title, h3.title */
}

4. `:not()`

用法：排除特定选择器的元素。
功能：支持复杂选择器列表，提升筛选能力。

示例：

div:not(.exclude, .hidden) {
  display: block; /* 匹配非 .exclude 和 .hidden 的 div */
}

5. 其他选择器

:has()（关系选择器，部分浏览器支持）：匹配包含特定子元素的父元素。
```
section:has(h2) {
  border: 1px solid; /* 匹配包含 h2 的 section */
}
```
属性选择器增强：如 [attr^="value"]（以 value 开头）、[attr$="value"]（以 value 结尾）。
```
a[href$='.pdf'] {
  color: red; /* 匹配以 .pdf 结尾的链接 */
}
```

其他选择器练习

@ 规则

CSS3 的 @ 规则用于定义样式表的特殊行为，如媒体查询、动画、字体等。

1. `@import`

用法：导入外部 CSS 文件或资源。
功能：支持模块化 CSS，支持条件导入（如结合媒体查询）。

示例：

@import url('base.css');
@import url('mobile.css') screen and (max-width: 600px);

2. `@media`

用法：定义响应式样式，基于设备特性（如屏幕宽度）应用样式。
功能：支持媒体查询，适配不同设备。

示例：

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media print {
  body {
    background: none; /* 打印样式 */
  }
}

3. `@keyframes`

用法：定义动画关键帧。
功能：用于 CSS 动画，指定动画序列。

示例：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
.box {
  animation: slide 2s infinite;
}

4. `@font-face`

用法：定义自定义字体。
功能：加载外部字体文件，支持多种格式（如 WOFF、TTF）。

示例：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: normal;
}
body {
  font-family: 'MyFont', sans-serif;
}

5. `@supports`

用法：检查浏览器是否支持特定 CSS 属性或值。
功能：提供特性检测，优雅降级。

示例：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

6. `@container`（容器查询，部分浏览器支持）

用法：基于父容器尺寸应用样式，而非视口。

示例：

.container {
  container-type: inline-size;
}
@container (min-width: 300px) {
  .item {
    font-size: 1.5rem;
  }
}

7. 其他 @ 规则

@charset：指定样式表字符编码，如 @charset "UTF-8";。
@namespace：定义 XML 命名空间，较少使用。
@page：定义打印页面的样式。
```
@page {
  margin: 2cm;
}
```

CSS 变量（自定义属性）

CSS3 引入了自定义属性（--*）和 var() 函数，用于动态管理样式。

1. `--*`（自定义属性）

用法：定义变量，通常在 :root 或元素上声明。
功能：提高样式复用性和维护性。

示例：

:root {
  --primary-color: #007bff;
  --spacing: 10px;
}
.button {
  background: var(--primary-color);
  margin: var(--spacing);
}

2. `var()`

用法：引用自定义属性，支持默认值。
功能：动态应用变量值。

示例：

.box {
  color: var(--text-color, black); /* 如果 --text-color 未定义，使用 black */
}

伪类与伪元素

CSS3 扩展了伪类和伪元素的功能。

1. 常用伪类

:hover：鼠标悬停。
```
a:hover {
  color: blue;
}
```
:first-child / :last-child：匹配第一个或最后一个子元素。
```
li:first-child {
  font-weight: bold;
}
```
:nth-child(n)：匹配第 n 个子元素，支持公式（如 2n）。
```
tr:nth-child(even) {
  background: #f2f2f2;
}
```

:focus-within：元素或其后代获得焦点时。

.form:focus-within {
  border: 1px solid blue;
}

2. 伪元素

::before / ::after：插入虚拟内容。

.box::before {
  content: '★';
  color: gold;
}

::marker：自定义列表标记。
```
li::marker {
  color: red;
}
```

CSS 函数

CSS3 引入了多种函数，用于动态计算值。

1. `calc()`

用法：执行数学运算，支持加减乘除。
示例：
```
.box {
  width: calc(100% - 20px);
}
```

2. `min()` / `max()` / `clamp()`

用法：取最小值、最大值或限制范围。

示例：

.text {
  font-size: clamp(16px, 2vw, 18px); /* 字体大小限制在 16px 到 18px 之间 */
}

3. 颜色函数

rgb() / rgba()：定义颜色，支持透明度。

.box {
  background: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

hsl() / hsla()：基于色调、饱和度、亮度。

.box {
  background: hsl(120, 100%, 50%); /* 绿色 */
}

4. 变换函数

transform：如 translate(), rotate(), scale()。

.box {
  transform: translate(50px, 100px) rotate(45deg);
}

单位与值

CSS3 引入了新的单位，增强了布局灵活性。

1. 相对单位

rem：相对于根元素字体大小。
em：相对于父元素字体大小。
vw / vh：视口宽度/高度的百分比。

vmin / vmax：视口最小/最大尺寸的百分比。

.box {
  width: 50vw; /* 视口宽度的 50% */
  font-size: 2rem; /* 根元素字体大小的 2 倍 */
}

2. 新值

inherit：继承父元素属性值。
initial：恢复属性初始值。

unset：根据属性特性选择 inherit 或 initial。

.box {
  color: unset; /* 如果 color 可继承，则继承父元素，否则恢复初始值 */
}

其他常用特性

1. 过渡（`transition`）

用法：平滑过渡属性变化。

示例：

.button {
  transition: background 0.3s ease;
}
.button:hover {
  background: red;
}

2. 网格布局（`grid`）

用法：定义二维布局。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

3. 弹性盒（`flex`）

用法：一维弹性布局。

示例：

.container {
  display: flex;
  justify-content: space-between;
}

4. 层叠上下文（`z-index`）

用法：控制元素堆叠顺序。

示例：

.overlay {
  position: absolute;
  z-index: 10;
}

注意事项

浏览器兼容性：某些特性（如 :has()、@container）在部分浏览器中支持有限，需检查兼容性（如使用 Can I Use）。
预处理器 vs 原生 CSS：& 等嵌套语法在 SCSS 中广泛使用，原生 CSS 嵌套正在逐步支持（Chrome/Edge 最新版本已支持）。
性能：过度使用复杂选择器（如 :where()、:is()）可能影响性能，需谨慎。
调试：使用浏览器开发者工具检查应用样式和变量值。

CSS3 部分语法关键字概览

选择器相关关键字

1. &（嵌套选择器）

2. :where()

3. :is()

4. :not()