语法 - CSS：层叠样式表

语法
==

层叠样式表（Cascading Stylesheet，简称 CSS），其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色、定位、装饰。CSS 的语法反映了这个目标，由下面两个部分构建：

* **属性**（property）是一个标识符，用可读的名称来表示其特性。
* **值**（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。
CSS 声明
------

CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为“声明”（declaration） 。CSS 引擎会计算页面上每个元素都有哪些声明，并且会根据结果绘制元素，排布样式。

在 CSS 中，无论是属性名还是属性值都是对大小写不敏感的。属性与值之间以英文冒号 ':' （U+003A COLON）隔开。属性与值前面、后面与两者之间的空白不是必需的，会被自动忽略。

![css syntax - declaration.png](/zh-CN/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

目前 CSS 中有 100 多个属性 ，并且几乎有无限多个不同的值。并非所有的属性与值的配对都是被允许的，每个属性都定义了它的合法值。如果值对给定的属性而言非法时，声明就会被视为无效的，整个声明就会被 CSS 引擎忽略。

CSS 声明块
-------

声明会按照**块**的形式被组合。声明块（declaration block）以英文左大括号 ('{' U+007B LEFT CURLY BRACKET) 开始，以英文右大括号 '}' (U+007D RIGHT CURLY BRACKET) 结束。块有时会嵌套，所以开始与结束大括号必须要匹配。

![css syntax - block.png](/zh-CN/docs/Web/CSS/Syntax/css_syntax_-_block.png)

**声明块**里面的声明之间使用英文分号（';' U+003B SEMICOLON）隔开。声明块可能为空，也就是包含空的声明。声明之间的空格会被忽略，声明块里最后一个声明可以不用分号，不过建议加上，以方便扩展声明块。

![css syntax - declarations block.png](/zh-CN/docs/Web/CSS/Syntax/declaration-block.png)

**备注：** 声明块的内容—开始与结束大括号之间的声明，可以放在 HTML `style` 特性里。

CSS 规则
------

如果样式表只能为每个页面元素添加一个声明，那就没有真正发挥出它的价值。其真正的目标是为文档不同部分添加不同的声明。

为此，CSS 可以在声明块前面放置选择器（selector)，选择器用来选择页面多个元素的条件。一对选择器与声明块称为规则集（ruleset)，常简称为规则（rule)。

![css syntax - ruleset.png](/zh-CN/docs/Web/CSS/Syntax/ruleset.png)

一个元素可能被多个选择器选中，因此会有多个规则，有可能以不同的值去设置同一属性。CSS 标准会规定哪个优先级最高并生效，称之为 层叠（cascade) 算法。

*有一点需要注意的是，尽管用一组选择器来定义的单个规则集，比用多个单一选择器来定义的多个规则集更加简洁，但这却不适用于规则集的有效性。*

*这会导致一个重要的后果：如果其中的一个选择器是无效的，如使用了一个未知的伪元素或伪类，会导致整个选择器都会无效，同时对应的规则都会被忽略。*

CSS 语句
------

规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候网页的作者也希望在样式表中包括其他的一些信息，比如字符集，导入其他的外部样式表，字体等，这些需要专门的语句表示。

语句以非空格的字符开头，以第一个反花括号或分号结束。

![css syntax - statements Venn diag.png](/zh-CN/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

语句类型：

* 规则。如上，将一组 CSS 声明与用选择器定义的条件相关联。
* at 规则（at-rules）。以 @ (U+0040 COMMERCIAL AT) 开始，随后是标识符，一直到以分号或右大括号结束。每个 at 规则由其标识符定义，可能有它自己的语法。at 规则涵盖了 meta 信息（比如 @charset @import)，条件信息（比如 @media @document), 描述信息（比如 @font-face)。

不是上面类型的语句则是非法的，被忽略。

 条件规则组（conditional group rules）是特殊的 at 规则，可以嵌套语句。它里面的语句只有在特定条件下才生效。
 CSS1 与 CSS2.1 下，条件规则组里面只能用规则。CSS3 下还可以用一些但不是全部的 at 规则，见*CSS Conditionals Level 3*。

参见
--

* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


CSS 基础框盒模型 - CSS：层叠样式表

CSS 基础框盒模型
==========

**CSS 基础框盒模型**是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

CSS 基础框盒模型一般仅针对单个元素及其边距、内容进行布局，而非对多个元素进行综合的排版，即使外边距合并等特性涉及二个或二个以上元素之间部分属性的交互反馈。

参考
--

### 属性

#### 控制框盒中内容流的属性

* `overflow`
* `overflow-x`
* `overflow-y`

#### 控制框盒大小的属性

* `height`
* `width`
* `max-height`
* `max-width`
* `min-height`
* `min-width`

#### 控制外边距 Margin 的属性

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US)
实验性

#### 控制内边距 Padding 的属性

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`

#### 其他属性

* `visibility`
指南
--

CSS 基础框盒模型介绍

解释了 CSS 的根本概念之一：框盒模型。该模型定义了 CSS 如何对元素的各个组成进行布局（lays out），这些组成包括他们的内容 Content、内边距 Padding、边框 Border，和外边距 Margin。

掌握外边距合并

有时，两个相邻的外边距会折叠合并成一个。本文介绍了控制此特性的规则，比如合并何时发生、为何发生；以及应当如何控制它。

视觉格式化模型

解释了视觉格式化模型（visual formatting model）是什么，以及它的作用。

规范
--

| Specification |
| --- |
| CSS Box Model Module Level 3  |


border-image-slice - CSS：层叠样式表

border-image-slice
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
**`border-image-slice`** CSS 属性将使用 `border-image-source` 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。

尝试一下
----

切分过程会将图像分割为 9 个区域：四个角、四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

![The nine regions defined by the border-image or border-image-slice properties](/zh-CN/docs/Web/CSS/border-image-slice/border-image-slice.png)

上图说明了每个区域的位置。

* 区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
* 区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
* 区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 `fill`，则会将其用作元素的背景图像。

`border-image-repeat`、`border-image-width` 和 `border-image-outset` 属性则用于定义如何使用这些图像。

语法
--

```css
/\* All sides \*/
border-image-slice: 30%;

/\* vertical | horizontal \*/
border-image-slice: 10% 30%;

/\* top | horizontal | bottom \*/
border-image-slice: 30 30% 45;

/\* top | right | bottom | left \*/
border-image-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
border-image-slice: 10% fill 7 12;

/\* Global values \*/
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
```

`border-image-slice` 属性可以用四个指定的 `<number-percentage>` 值来表示每一个图像切片的位置。负数是无效的，而大于其相应的最大尺寸的值则会被限制为 `100%`。

* 仅指定了**一**个位置（1 个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
* 当指定了**两**个位置（2 个值）时，第一个值表示垂直方向的两个切片的高度（即 **top** 与 **bottom**），第二个值表示水平方向两侧切片的宽度（即 **left** 和 **right**）。
* 当指定了**三**个位置（3 个值）时，第一个值表示顶部切片的高度（即 **top**），第二个值表示水平方向两侧切片的宽度（即 **left** 和 **right**），第三个值则表示底部切片的高度（即 **buttom**）。
* 当指定了**四**个位置（4 个值）时，这四个值则分别对应 **top**、**right**、**buttom**、**left**（上、右、下、左）四个切片的宽度/高度。

可选值 `fill` 可放在上面声明的值的末尾。

### 取值

`<number>`

表示到图像边缘的偏移量，在位图中的单位为*像素点*，在矢量图中则是坐标。对于矢量图，`<number>` 值与元素大小相关，而非矢量图的原始大小。因此，使用矢量图时，使用百分比值（`<percentage>`）更可取。

`<percentage>`

以原始图像大小的百分比表示的边缘偏移量：水平偏移使用图像的宽度，垂直偏移则使用图像的高度。

`fill`

保留图像的中心区域并将其作为背景图像显示出来，但其会堆叠在 `background` 之上。它的宽度和高度分别对应顶部和左侧图像切片的宽度和高度。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `100%` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of the border image |
| 计算值 | one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified |
| Animation type | by computed value type |

形式语法
----
```

border-image-slice =
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?

```

示例
--

### 可调整的边框宽度和切片

以下示例展示了一个简单的带有边框图像的 `<div>`。引用的边框图像如下所示：

![nice multi-colored diamonds](/zh-CN/docs/Web/CSS/border-image-slice/border-diamonds.png)

图像中钻石是长宽分别为 30px，所以我们将 `border-width` 和 `border-image-slice` 的值分别设置为 30px，以呈现完整且清晰的钻石图像。

```css
border-width: 30px;
border-image-slice: 30;
```

这是我们在示例中采用的默认值。我们还额外提供了两个滑块，让你可以动态修改这两个属性的值，以查看对应的效果。

`border-image-slice` 用于改变每个边区域和角区域对应的图像切片（如果设置了 `fill` 关键字，则会额外包括图像的中心区域）的大小——将其改变为其他值会使边框中的形状看起来不太规则，但这会产生一些有趣的效果。

`border-width` 用于改变边框的宽度。引用的图像切片将被缩放以适应边框的大小。这意味着，如果边框宽度大于切片宽度，图像可能会变得模糊（除非使用了 SVG 矢量图）。

#### HTML

```html
<div class="wrapper">
  <div></div>
</div>

<ul>
  <li>
    <label for="width">slide to adjust <code>border-width</code></label>
    <input type="range" min="10" max="45" id="width" />
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice">slide to adjust <code>border-image-slice</code></label>
    <input type="range" min="10" max="45" id="slice" />
    <output id="slice-output">30</output>
  </li>
</ul>
```

#### CSS

```css
.wrapper {
  width: 400px;
  height: 300px;
}

div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
  border-image-slice: 30;
  border-image-repeat: round;
}

li {
  display: flex;
  place-content: center;
}
```

#### JavaScript

```js
const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");

widthSlider.addEventListener("input", () => {
  const newValue = widthSlider.value + "px";
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
});

sliceSlider.addEventListener("input", () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
});
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-slice |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 图解说明 1 到 4 个值的语法


:last-of-type - CSS：层叠样式表

:last-of-type
=============

概述
--

`:last-of-type` CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

语法
--
```

element:last-of-type { style properties }
```

示例
--

```css
p em:last-of-type {
  color: lime;
}
```

```html
<p>
  <em>我没有颜色 :(</em><br />
  <strong>我没有颜色 :(</strong><br />
  <em>我有颜色 :D</em><br />
  <strong>我也没有颜色 :(</strong><br />
</p>

<p>
  <em>我没有颜色 :(</em><br />
  <span><em>我有颜色！</em></span
 ><br />
  <strong>我没有颜色 :(</strong><br />
  <em>我有颜色 :D</em><br />
  <span>
    <em>我在子元素里，但没有颜色！</em><br />
    <span style="text-decoration:line-through;"> 我没有颜色 </span><br />
    <em>我却有颜色！</em><br /> </span
 ><br />
  <strong>我也没有颜色 :(</strong>
</p>
```

结果如下：

规范
--

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `:nth-last-of-type`
* `:first-of-type`
* `:nth-of-type`


:dir() - CSS：层叠样式表

:dir()
======

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

总结
--

`:dir()`伪类匹配特定文字书写方向的元素。在 HTML 中，文字方向由`dir`属性决定。其他的文档类型可能有其他定义文字方向的方法。

值得注意的是用 CSS 伪类 `:dir()` 并不等于使用 `[dir=…]` 属性选择器。后者匹配 `dir` 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， `[dir=rtl]` 或 `[dir=ltr]` 不会匹配到 dir 属性的值为 auto 的元素。而 `:dir()`会匹配经过客户端计算后的属性，不管是继承的 dir 值还是 dir 值为 auto 的。

另外，:dir() 伪类仅考虑文档（大多数情况是 HTML）中定义的文字方向的语义值 (semantic value)，并不会考虑格式值 (styling value)，如 CSS 属性 `direction` 的值。

语法
--
```

元素:dir(文字书写方向) { style properties } 文字书写方向为 ltr 或 rtl
```

示例
--

```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

本例中 `:dir(rtl)` 会匹配最外层的 div，内容为`test1 的 span，`和有希伯来字符的 div。`:dir(ltr)` 会匹配到内容为`test2 的 div.`

规范
--

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 语言相关伪类：`:lang`, `:dir`


CSS 局限 - CSS：层叠样式表

CSS 局限
======

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
CSS 局限规范的目标在于通过允许浏览器从页面的其余部分中隔离出页面子树而改善性能。若浏览器知道页面的某一部分为独立的，则可优化渲染并改善性能。

此外，此规范允许开发者标示元素究竟是否应当渲染其内容，以及在屏外时是否应当渲染其内容。由此允许用户代理在恰当的时候在元素上应用局限，并有望将布局和渲染推迟至需要时再进行。

此规范定义了 CSS 属性 `contain` 和 `content-visibility`。本文档描述了此规范的基本目标。CSS 容器查询的细节见 CSS 容器查询。

基本示例
----

许多网页包含若干互相独立的部分，例如下列标记代码中所罗列的文章标题和内容。

```html
<h1>我的博客</h1>
<article>
  <h2>好文标题</h2>
  <p>此处为内容。</p>
</article>
<article>
  <h2>另一文章的另一标题</h2>
  <p>此处为更多的内容。</p>
</article>
```

在 CSS 中，每篇文章有应用了带 `content` 值的 `contain` 属性。

```css
article {
  contain: content;
}
```

每篇文章均与页面上的其他文章相独立，因此给了这些文章 `contain: content` 向浏览器标示此情况，然后浏览器可以据此决定如何渲染内容。例如浏览器可能不会渲染可见区域之外的文章。

如果给每个 `<article>` 带 `content` 值的 `contain` 属性，那么在插入新元素时，浏览器无需重新计算布局或重绘包含元素子树之外的任意区域。如果 `<article>` 的样式尺寸取决于其内容（如有 `height: auto`），那么浏览器可能需要考虑到其尺寸的变化。

我们通过 `contain` 属性说明了每篇文章都是独立的。

`content` 值为 `contain: layout paint style` 的简写。此值告诉浏览器元素的内部布局与页面其余部分完全分离，且元素的方方面面均绘制在其边界的内部，不会出现可见溢出。

创建页面的 web 开发者通常知晓这一（其实相当显然的）信息。然而浏览器无法猜测你的意图，不能假设文章将完全自成一体。因此此属性让你可以向浏览器说明这一点，并允许浏览器据此做出性能优化。

关键概念和术语
-------

### `contain` 的值

`contain` 属性的值标示了你想应用于元素的局限类型。

#### 布局局限

```css
article {
  contain: layout;
}
```

布局的作用域通常为整个文档，即若移动一个元素，则需视为整个文档的所有元素均可被移动至任意位置。通过使用 `contain: layout` 可以告诉浏览器只需检查此元素——元素内任意内容的作用域均被限制为此元素，不会影响页面的其余部分，且包含盒将建立独立的格式化上下文。

此外：

* 浮动（`float`）布局将独立进行。
* 外边距将不会越过布局局限边界发生折叠。
* 布局容器将作为绝对（`absolute`）或相对（`fixed`）定位后代的包含区块。
* 包含盒将创建层叠上下文，故可使用 `z-index`。

#### 绘制局限

```css
article {
  contain: paint;
}
```

绘制局限主要将盒子裁剪至主盒的内边距边，不会出现可见溢出。关于布局（`layout`）局限的描述（见上文）也适用于绘制（`paint`）局限。

另一优点在于若包含盒在屏外，则浏览器无需绘制其被局限的元素——这些元素因为被完全局限于此盒故必然也在屏外。

#### 尺寸局限

```css
article {
  contain: size;
}
```

尺寸局限在单独使用时不会提供较大的性能优化。然而此局限意味着此元素的子元素尺寸无法影响元素本身的尺寸——计算其尺寸时视为无子元素。

若启用 `contain: size`，则还需使用 `contain-intrinsic-size`（或等价的全称属性）指定应用此值的元素的尺寸。若不手动给予其尺寸，则多数时候元素尺寸将变为零。

#### 样式局限

```css
article {
  contain: style;
}
```

尽管名称如此，但是样式局限不提供如由 Shadow DOM 可得的域限（scoped）样式。其主要用途为防止 CSS 计数器可在元素中被更改的情形出现，此情形可影响树的其余部分。

使用 `contain: style` 将确保由 `counter-increment` 和 `counter-set` 属性所创建的新计数器的作用域被限制为此子树。

#### 特殊值

`contain` 有两个特殊值：

* `content`
* `strict`

在上述示例中见到了第一个值。使用 `contain: content` 将启用布局（`layout`）和绘制（`paint`）局限。规范将此值描述为“对于广泛应用而言相当保险”。由于此值不应用尺寸（`size`）局限，故不会面临盒子尺寸因为依赖于其子元素尺寸而变为零的风险。

为获得尽可能多的局限，请使用 `contain: strict`，此值效果与 `contain: size layout paint style` 相同：

```css
contain: strict;
```

### `content-visibility`

`content-visibility` 控制元素是否渲染其内容，以及施加一组强局限，由此允许用户代理有机会在不需要时省略大片的布局和渲染工作。此属性使用户代理得以在不需要时跳过元素的渲染工作（包括布局和绘制）——由此使页面的初始加载明显变快。

其可取值为：

* `visible`：默认行为——元素内容照常进行布局和渲染。
* `hidden`：元素跳过其内容。被跳过的内容必须不可被例如页内查找和 tab 键顺序导航等用户代理特性访问，亦不可被选中或获得焦点。
* `auto`：元素启用布局局限、样式局限和绘制局限。若元素不与用户相关，则元素还跳过其内容。与 `hidden` 不同的是，被跳过的内容必须仍可照常被例如页内查找和 tab 键顺序导航等用户代理特性访问，且必须照常可获得焦点或被选中。
### 与用户相关

此规范提及了与用户相关这一概念。与用户相关的元素因为可见或用户正在交互所以应被渲染。

确切而言，若下列任意条件为真则元素与用户相关：

* 元素出现于视口或视口周围由用户代理所定义的外边距（视口尺度的 50%，给予应用在元素可见性改变时做准备的时间）内。
* 元素或其内容获得焦点。
* 元素或其内容被选中，例如用鼠标光标在文本上拖拽或进行其他突显操作。
* 元素或其内容被置于顶层。
### 跳过其内容

此规范提及了跳过其内容这一概念。此概念意味着所指元素与用户无关，且为改善性能将不被渲染。

确切而言，在元素跳过其内容时：

* 元素启用布局、样式、绘制和尺寸局限。
* 不绘制其内容，视为设置了 `visibility: hidden`。
* 其内容不接收指示器事件，视为设置了 `pointer-events: none`。
参考
--

### CSS 属性

* `contain`
* `content-visibility`
规范
--

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |
| CSS Containment Module Level 2 # content-visibility |

浏览器兼容性
------

### css.properties.contain

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.content-visibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 局限介绍
* `contentvisibilityautostatechange` 事件


CSS 滚动吸附 - CSS：层叠样式表

CSS 滚动吸附
========

**CSS 滚动吸附**模块所提供的属性可通过定义吸附位置控制滑屏和滚动行为。当用户在滚动容器中滚动溢出的内容时，内容可吸附至特定位置，由此提供分页和滚动定位效果。

此模块包含滚动容器的滚动内边距属性，用于调整滚入视野操作中分页的最佳可见区域。此模块还包含设置于滚动容器子元素的滚动外边距和滚动对齐方式属性，用于调整子元素在滚入视野时的可见区域，以及用于使滚动强制止于各子元素的属性。

滚动吸附实践
------

为在下方的框中查看滚动吸附，可在滚动式视口中上下左右地滚动经过含 45 个带编号盒子的网格。

在有滚动吸附时，所滚动的带编号盒子中的一者将吸附至指定位置。初始的 CSS 代码使带编号盒子吸附至视口中心，可使用滑块改变块向和行向的吸附位置。

使用吸附属性可允许或防止滚动越过某个元素（此示例中为带编号盒子）。可勾选“Prevent scrolling past boxes”使所有滚动操作被强制限于滚动至相邻盒子。

为比较滚动吸附与普通滚动，可勾选“disable snapping”并再次尝试滚动。

此示例的代码见 GitHub 上的源码。

参考
--

### 容器上的属性

* `scroll-snap-type`
* `scroll-padding`
    + `scroll-padding-top`
    + `scroll-padding-right`
    + `scroll-padding-bottom`
    + `scroll-padding-left`
    + `scroll-padding-inline`
    + `scroll-padding-inline-start`
    + `scroll-padding-inline-end`
    + `scroll-padding-block`
    + `scroll-padding-block-start`
    + `scroll-padding-block-end`
### 子元素上的属性

* `scroll-snap-align`
* `scroll-margin`
    + `scroll-margin-top`
    + `scroll-margin-right`
    + `scroll-margin-bottom`
    + `scroll-margin-left`
    + `scroll-margin-inline`
    + `scroll-margin-inline-start`
    + `scroll-margin-inline-end`
    + `scroll-margin-block`
    + `scroll-margin-block-start`
    + `scroll-margin-block-end`
* `scroll-snap-stop`
指南
--

CSS 滚动吸附的基本概念

CSS 滚动吸附特性的概览和示例。

相关概念
----

* `:target` 伪类
* CSS 属性 `overflow`
* Element `scroll()` 方法
* Element `scrollBy()` 方法
* Element `scrollIntoView()` 方法
* Element `scrollTo()` 方法
* Document `scroll` 事件
* ARIA 角色 `scrollbar` (en-US)
* 术语滚动容器
规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

参见
--

* CSS 溢出 (en-US)模块
* CSS 滚动条样式化模块
* 纯键盘滚动区域（载于 adrianroselli.com，2022 年）
* 滚动吸附示例（载于 Codepen，2022 年）
* 用 CSS 滚动吸附明确控制滚动（载于 web.dev，2021 年）
* 实用 CSS 滚动吸附（载于 CSS-Tricks，2020 年）
* CSS 滚动吸附（载于 12 Days of Web，2019 年）


<angle-percentage> - CSS：层叠样式表

<angle-percentage>
==================

CSS 数据类型 **`<angle-percentage>`** 代表了一种既可以是 `<angle>` ，也可以是`<percentage>`的数据类型

语法
--

有关此类型的详细文档，请参阅 `<angle>` 和 `<percentage>`

在 calc() 中使用这个类型
----------------

当 `<angle-percentage>` 被正确定义后，它就代表了一个可以被 `calc()` 表达式解析的角度

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


::grammar-error - CSS：层叠样式表

::grammar-error
===============

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`::grammar-error 伪元素应用于浏览器标识为语法错误的文本段`

只有一小部分的 css 能够应用在`::grammar-error 的选择器中`

* `color`
* `background-color`
* `cursor`
* `text-emphasis-color` (en-US)
* `text-shadow`
* `outline` and its longhands
* `text-decoration` and its associated properties
Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `::spelling-error`


padding-block-start - CSS：层叠样式表

padding-block-start
===================

CSS 属性 **`padding-block-start`** 定义了元素的逻辑块首内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
padding-block-start: 10px; /\* 绝对长度 \*/
padding-block-start: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-block-start: 5%; /\* 相对于包含区块宽度的内边距 \*/

/\* 全局值 \*/
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: revert;
padding-block-start: revert-layer;
padding-block-start: unset;
```

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

虽然规范定义 `padding-block-start` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

与此相关的属性有 `padding-block-end`、`padding-inline-start` 和 `padding-inline-end`，这些属性定义了元素的其他内边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as `length` |
| Animation type | a length |

形式语法
----
```

padding-block-start =
  <'padding-top'>

```

示例
--

### 为竖排文本设置块首内边距

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`
* `writing-mode`、`direction`、`text-orientation`


:nth-of-type - CSS：层叠样式表

:nth-of-type
============

**`:nth-of-type()`** CSS 伪类基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。

尝试一下
----

语法
--

`nth-of-type` 伪类用单个参数指定，该参数表示匹配元素的模式。

有关其语法的详细说明，请参阅 `:nth-child`。

```css
:nth-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

示例
--

### 基本示例

#### HTML

```html
<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p class="fancy">这是第二段。</p>
  <div>这段不参与计数。</div>
  <p class="fancy">这是第三段。</p>
  <p>这是第四段。</p>
</div>
```

#### CSS

```css
/\* 奇数段 \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* 偶数段 \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* 第一段 \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* 这将匹配第三个段落，因为它匹配的元素是 2n+1 并且具有 fancy 类。
 第二个段落具有 fancy 类，但不匹配，因为它不是:nth-of-type(2n+1)。
\*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```

#### 结果

**备注：** 使用此选择器无法选择 nth-of-class。选择器仅在创建匹配列表时查找类型。但是你可以基于 `:nth-of-type` 的位置**和**类名为元素应用 CSS，就像上面的示例中所示。

规范
--

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `:nth-child`、`:nth-last-of-type`


:placeholder-shown - CSS：层叠样式表

:placeholder-shown
==================

**`:placeholder-shown`** CSS 伪类表示当前显示占位符文本的任何 `<input>` 或 `<textarea>` 元素。

尝试一下
----

语法
--

```css
:placeholder-shown {
  /\* ... \*/
}
```

示例
--

### 基础示例

该示例中，输入框在显示占位符时将应用特殊字体和边框样式。

#### HTML

```html
<input placeholder="在这里输入一些东西！" />
```

#### CSS

```css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}
```

#### 结果

### 文本溢出

当表单字段太小时，占位文本可能会以不良方式被裁剪。你可以使用 `text-overflow` 属性来更改溢出文本的显示方式。

#### HTML

```html
<input id="input1" placeholder="名字、排行和序号" /> <br /><br />
<input id="input2" placeholder="名字、排行和序号" />
```

#### CSS

```css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}
```

#### 结果

### 自定义输入框

以下示例使用自定义样式突出显示了学生 ID 字段。

#### HTML

```html
<form id="test">
  <p>
    <label for="name">输入学生姓名：</label>
    <input id="name" placeholder="学生姓名" />
  </p>
  <p>
    <label for="branch">输入学生分会：</label>
    <input id="branch" placeholder="学生分会" />
  </p>
  <p>
    <label for="sid">输入学生 ID：</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```

#### CSS

```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # placeholder |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `::placeholder` 伪元素为占位符*自身*设置样式。
* 相关的 HTML 元素：`<input>`、`<textarea>`
* HTML 表单


@document - CSS：层叠样式表

@document
=========

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`@document` CSS at-rule 根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表（UserStyle）而设计的，但也可以在作者定义的样式表上使用。

```css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}
```

语法
--

`@document` 规则可以指定一个或多个匹配函数。如果任何功能适用于给定的 URL，则该规则将对该 URL 生效。可用的函数如下：

* `url()`，匹配整个 URL。
* `url-prefix()`，匹配文档的 URL 是否以参数指定的值开头。
* `domain()`，匹配文档的域名是否为参数中指定的域名或者为它的子域名。
* `regexp()`，匹配文档的 URL 是否和参数中指定的正则表达式匹配。该表达式必须匹配整个 URL。

提供给 `url()`、`url-prefix()`，和 `domain()` 函数的参数可以不使用引号括起来。但提供给 `regexp()` 函数的参数必须用引号括起来。

提供给 `regexp()` 函数的正则表达式中的转义字符必须再次进行一次 CSS 转义。例如，一个点号（`.`），在正则表达式中匹配任意换行符之外的字母。如果想要匹配一个正真的点号，必须首先按照正则表达式的规则转义一次（变为 `\.`）然后在使用 CSS 的规则再转义一次（转换为`\\.`）。

例子
--

```css
@document url(http://www.w3.org/),
 url-prefix(http://www.w3.org/Style/),
 domain(mozilla.org),
 regexp("https:.\*") {
  /\* 该条 CSS 规则会应用在下面的网页：
 + URL 为"http://www.w3.org/"的页面。
 + 任何 URL 以"http://www.w3.org/Style/"开头的网页
 + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页
 + 任何 URL 以"https:"开头的网页 \*/

  /\* 让上述网页变得超级丑 \*/
  body {
    color: purple;
    background: yellow;
  }
}
```

规范
--

`@document` 在 Level 3 中被初始化，并被推迟到 Level 4，但随后被移除。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Per-site user style sheet rules on the www-style mailing list.
* The file `userContent.css` is a user stylesheet on Gecko-based browsers.


caret-color - CSS：层叠样式表

caret-color
===========

**`caret-color`** 属性用来定义**插入光标**（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 `|` 的东西。

尝试一下
----

附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一段 `cursor` 属性是 `auto` 的文本上方时，或移动到 `cursor` 属性是 `text`、 `vertical-text` 的內容上方時，虽然看起来有点像插入光标，但它不是插入光标（caret），而是鼠标指针光标（cursor）。

语法
--

```css
/\* Keyword values \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/\* <color> values \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
```

### 值

`auto`

默认颜色，此时浏览器应该用 `currentcolor` 来作为插入光标的颜色，但浏览器可能还会根据当前的背景色、阴影色等来对该颜色进行适当的调整以确保该插入光标具有良好的可见性。

**备注：** **auto** 属性值在 CSS transitions/animations 中是不支持颜色插补（interpolated）的

`<color>`

所指定的插入光标的颜色值。

### 正式语法
```

caret-color =
  auto     |
  <color>

```

示例
--

### HTML

```html
<input />
```

### CSS

```css
input {
  caret-color: red;
}
```

### 示例演示

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | a color |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


:read-write - CSS：层叠样式表

:read-write
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
**`:read-write`** `CSS` `伪类` 代表一个元素（例如可输入文本的 input 元素）可以被用户编辑。

```css
/\* 选择所有可编辑的 <input> 元素 \*/
/\* Firefox 中需要加前缀 \*/
input:-moz-read-write {
  background-color: #bbf;
}

/\* Supported in Blink/WebKit/Edge without a prefix \*/
input:read-write {
  background-color: #bbf;
}
```

**备注：** 这个选择器不仅仅选择 `<input>` 元素，它也会选择所有可以被用户编辑的元素，例如设置了 `contenteditable` 属性的 `<p>` 元素。

语法
--

Error: could not find syntax for this item示例
--

### HTML

```html
<input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>
```

### CSS

```css
input {
  min-width: 25em;
}
input:-moz-read-write {
  background: cyan;
}
input:read-write {
  background: cyan;
}

p:-moz-read-write {
  background: lightgray;
}
p:read-write {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `:read-only`
* HTML `contenteditable` attribute


实际值 - CSS：层叠样式表

实际值
===

概述
--

一个 CSS 属性的\*\*实际值（actual value）\*\*是应用值（used value）被应用后的近似值。例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

参见
--

* CSS Reference
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


touch-action - CSS：层叠样式表

touch-action
============

CSS 属性 **`touch-action`** 用于设置触摸屏用户如何操纵元素的区域 (例如，浏览器内置的缩放功能)。

```css
/\* Keyword values \*/
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/\* Global values \*/
touch-action: inherit;
touch-action: initial;
touch-action: unset;
```

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

默认情况下，平移（滚动）和缩放手势由浏览器专门处理。使用 `Pointer_events` 的应用程序将在浏览器开始处理触摸手势时收到一个 pointercancel (en-US) 事件。通过明确指定浏览器应该处理哪些手势，应用程序可以在 pointermove 和 pointerup (en-US) 监听器中为其余的手势提供自己的行为。使用 `Touch_events` 的应用程序通过调用 `preventDefault()` 禁用浏览器处理手势，但也应使用**触摸操作**确保浏览器在调用任何事件侦听器之前，了解应用程序的意图。

当手势开始时，浏览器与触摸的元素及其所有祖先的**触摸动作**值相交直到一个实现手势（换句话说，第一个包含滚动元素）的**触摸动作**值。这意味着在实践中，**触摸动作**通常仅适用于具有某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定**触摸动作**。手势开始之后，**触摸动作**值的更改将不会对当前手势的行为产生任何影响。

语法
--

touch-action 属性可以被指定为：

* 任何一个关键字 `auto`、`none`、`manipulation`，或
* 零或任何一个关键字 `pan-x`、`pan-left`、`pan-right`，加 零或任何一个关键字 `pan-y`、`pan-up`、`pan-down`，加可选关键字 `pinch-zoom`.
### 值

`auto`

当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对 viewport 进行平滑、缩放等。

`none`

当触控事件发生在元素上时，不进行任何操作。

`pan-x`

启用单指水平平移手势。可以与 **pan-y**、**pan-up**、**pan-down** 和／或 **pinch-zoom** 组合使用。

`pan-y`

启用单指垂直平移手势。可以与 **pan-x 、pan-left**、**pan-right** 和／或 **pinch-zoom** 组合使用。

`manipulation`

浏览器只允许进行滚动和持续缩放操作。任何其他被 auto 值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。这是“**pan-x pan-y pinch-zoom**”（为了兼容性本身仍然有效）的别名。

`pan-left`, `pan-right,pan-up,pan-down`
实验性

启用以指定方向滚动开始的单指手势。一旦滚动开始，方向可能仍然相反。请注意，滚动“向上”（**pan-up**）意味着用户正在将其手指向下拖动到屏幕表面上，同样 **pan-left** 表示用户将其手指向右拖动。多个方向可以组合，除非有更简单的表示（例如，“**pan-left pan-right**”无效，因为“**pan-x**”更简单，而“**pan-left pan-down**”有效）。

`pinch-zoom`

启用多手指平移和缩放页面。这可以与任何平移值组合。

### 正式语法
```

touch-action =
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation

```

示例
--

最常见的用法是禁用元素（及其不可滚动的后代）上的所有手势，以使用自己提供的拖放和缩放行为（如地图或游戏表面）。

```css
#map {
  touch-action: none;
}
```

另一种常见的模式是使用指针事件处理水平平移的图像轮播，但不想干扰网页的垂直滚动或缩放。

```css
.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}
```

**触摸动作**也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。

```css
html {
  touch-action: manipulation;
}
```

Specifications
--------------

| Specification |
| --- |
| Compatibility Standard # touch-action |
| Pointer Events # the-touch-action-css-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `Pointer Events`
* WebKit Blog More Responsive Tapping on iOS


::selection - CSS：层叠样式表

::selection
===========

**`::selection`** CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

```css
::selection {
  background-color: cyan;
}
```

允许属性
----

只有一小部分 CSS 属性可以用于`::selection` 选择器：

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color` (en-US)
* `text-shadow`

**警告：** 要特别注意的是，`background-image` 会如同其他属性一样被忽略。

语法
--
```

/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection

Error: could not find syntax for this item
```

示例
--

### HTML

```html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
```

### CSS

```css
::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```

```css
/\* 选中的文本是红色背景，金黄色的字体 \*/
::selection {
  color: gold;
  background-color: red;
}

/\*选中的是蓝色背景，白色的字体的段落\*/
p::selection {
  color: white;
  background-color: blue;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

**备注：** `::selection` CSS 伪元素选择器是 CSS 第 3 级选择器的草案，但是在被推荐使用前就被废弃。它现在在第 4 级伪元素选择器草案中。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


border-left-style - CSS：层叠样式表

border-left-style
=================

The **`border-left-style`** CSS property sets the line style of an element's left `border`.

尝试一下
----

**备注：** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------

```css
/\* Keyword values \*/
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

/\* Global values \*/
border-left-style: inherit;
border-left-style: initial;
border-left-style: unset;
```

The `border-left-style` property is specified as a single keyword chosen from those available for the `border-style` property.

### Formal syntax
```

border-left-style =
  <line-style>

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

Examples
--------

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style example classes \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}
```

Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-style |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The other style-related border properties: `border-bottom-style`, `border-right-style`, `border-top-style`, and `border-style`.
* The other left-border-related properties: `border-left`, `border-left-color`, and `border-left-width`.


CSS Table - CSS：层叠样式表

CSS Table
=========

**CSS Table** 是一个定义如何展示表格数据的 CSS 模块。

参考
--

### 属性

* `border-collapse`
* `border-spacing`
* `caption-side`
* `empty-cells`
* `table-layout`
* `vertical-align`
规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |


<percentage> - CSS：层叠样式表

<percentage>
============

CSS 数据类型 `<percentage>` 表述一个百分比值。许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。百分比值由一个`<number>`具体数值后跟着%符号构成。就像其他在 css 里的单位一样，在%和数值之间是不允许有空格的。

许多长度属性使用百分比，如 `width`, `height`, `margin`, `padding`。百分比也可以在 `font-size` 看到，其中的文字大小是其父级元素的大小直接相关。

**备注：** 只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 `<length>` 的值，将访问继承的属性，而不是百分比的值。

语法
--

百分比值由一个`<number>`具体数值后跟着`%`符号构成。在数值前可加上`+`号或者`-`号，但对所有属性来说其负值都是无效的。和所有的 CSS 度量值一样，在`%`符号和数值之间不允许有空格。

插值动画
----

使用 `<percentage>` 的值可以插值为动画。在这种情况下，它们被内插为实数或浮点数。插值的速度取决于与动画相关联的 timing function (en-US)。

示例
--

### 作为 width 与 margin-left 的值的单位

```html
<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```

以上 HTML 将输出：

### 作为 font-size 的值的单位

```html
<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div>
```

以上 HTML 将输出：

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # percentages |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


:host-context() - CSS：层叠样式表

:host-context()
===============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`:host-context()`** CSS 伪类函数选择内部使用了该 CSS 的影子 DOM（shadow DOM）的影子宿主（shadow host），因此你可以从其影子 DOM 内部选择自定义元素——但前提是作为函数参数的选择器与影子宿主的祖先在 DOM 层次结构中的位置匹配。

换句话说，这允许自定义元素或其影子 DOM 内的任何内容根据其在外部 DOM 中的位置或应用于祖先元素的类/属性应用不同的样式。

这样子做的一个典型用法是与后代选择器表达式（例如 h1）一起使用，仅选择在 `<h1>` 内的自定义元素的实例。另一个典型用法是允许内部元素对任何祖先元素上的类或属性做出反应，例如，在将 `.dark-theme` 类应用于 `<body>` 时应用不同的文本颜色。

**备注：** 这在影子 DOM 之外使用时无效。

```css
/\* 选择影子根宿主，仅当它是给定的选择器参数的后代 \*/
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/\* 当 .dark-theme 类应用于文档 body 时，将段落文本颜色从黑色更改为白色 \*/
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}
```

语法
--

```css
:host-context(<compound-selector>) {
  /\* ... \*/
}
```

示例
--

下边的代码片段来自 host-selectors 示例（也可以在线查看）。

在本例中，我们有一个简单的自定义元素（`<context-span>`），你可以把文字包裹在该自定义标签中：

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

在自定义元素的构造器函数中，我们创建 `style` 和 `span` 元素。让 `span` 里呈现的是自定义元素的文字内容，并且给 `style` 元素一些 CSS 规则。

```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

`:host-context(h1) { font-style: italic; }` 和 `:host-context(h1):after { content: " - no links in headers!" }` 规则应用 `<h1>` 内部的 `<context-span>` 元素实例（在此实例中为影子宿主）。我们使用它来明确指出：在我们的设计中，自定义元素不应出现在 `<h1>` 内部。

规范
--

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Web 组件
* `:host`
* `:host()`


后续兄弟选择器 - CSS：层叠样式表

后续兄弟选择器
=======

**后续兄弟选择器**（`~`）将两个选择器分开，并匹配第二个选择器的*所有迭代元素*，位置无须紧邻于第一个元素，只须有相同的父级元素。

```css
/\* 在任意图像后的兄弟段落 \*/
img ~ p {
  color: red;
}
```

语法
--

```css
former\_element ~ target\_element { style properties }
```

示例
--

### CSS

```css
p ~ span {
  color: red;
}
```

### HTML

```html
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code…</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接续兄弟选择器


:hover - CSS：层叠样式表

:hover
======

**`:hover`** CSS 伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。

尝试一下
----

`:hover` 伪类定义的样式将被任何后续的链接相关伪类（`:link`、`:visited` 或 `:active`）覆盖，这些伪类的特殊性至少相等。为了适当地为链接设置样式，应该在 `:link`和 `:visited` 规则之后，`:active` 规则之前放置 `:hover` 规则，即按照 *LVHA 定义的顺序*：`link` — `:visited` — `:hover` — `:active`。

**备注：** 在触摸屏上，`:hover` 伪类可能存在问题。根据不同的浏览器，`:hover` 伪类可能永远不会匹配，只会在触摸一个元素后短暂匹配，或者即使用户停止触摸并且直到用户触摸另一个元素之前仍然匹配。Web 开发人员应确保内容可以在具有有限或不存在悬停功能的设备上访问。

语法
--

```css
:hover {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML

```html
<a href="#">尝试将鼠标悬停到该元素上。</a>
```

#### CSS

```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```

#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Chromium bug #370155：在设置移动端视口的网站上，不要使 `:hover` 在触摸时保持悬停状态。
* Chromium bug #306581：当页面无法滚动时，在触摸时立即显示 `:hover` 和 `:active` 状态。


CSS 基本数据类型 - CSS：层叠样式表

CSS 基本数据类型
==========

**CSS** 基本数据类型是 组件值类型 component value type 的一种。用于定义 CSS 属性和函数可以接受的变量（关键字和单位）的种类。

数据类型由放置在不等式符号 "<" 和 ">" 之间的关键字表示：

Reference
---------

* `<angle>`
* `<basic-shape>`
* `<blend-mode>`
* `<color>`
* `<custom-ident>`
* `<filter-function>`
* `<flex>`
* `<frequency>`
* `<gradient>`
* `<image>`
* `<integer>`
* `<length>`
* `<number>`
* `<percentage>`
* `<position>`
* `<ratio>`
* `<resolution>`
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>`
* `<time>`
* `<transform-function>`
* `<url>()`
Specifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |


hypot() - CSS：层叠样式表

hypot()
=======

CSS 函数 **`hypot()`** 为指数型函数，返回其参数平方和的平方根。

尽管 `pow()` 和 `sqrt()` 仅作用于无单位数值，然而 `hypot()` 可接受带单位的值，但是这些值须全部具有相同类型。

语法
--

```css
/\* <number> 值 \*/
width: hypot(2em); /\* 2em \*/
width: hypot(3em, 4em); /\* 5em \*/
width: hypot(30px, 40px); /\* 50px \*/
width: hypot(48px, 64px); /\* 80px \*/
width: hypot(3px, 4px, 5px); /\* 7.0710678118654755px \*/
```

### 参数

`hypot(x [, ...]#)` 函数接受由逗号分隔的至少一个计算式作为其参数。

`x`、`x2`、……、`xN`

解析为 `<number>`、`<dimension>` 或 `<percentage>` 的计算式。

### 返回值

（根据输入）返回 `<number>`、`<dimension>` 或 `<percentage>`，为其参数平方和的平方根。

* 若任一输入为 `infinite`，则结果为 `+∞`。
* 若提供单个参数，则结果为其输入值的绝对值。`hypot(2em)` 和 `hypot(-2em)` 均解析为 `2em`。
### 形式语法
```

<hypot()> =
  hypot( <calc-sum># )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

示例
--

### 基于 hypot 函数的尺寸

此示例展示了如何使用 `hypot()` 函数计算尺寸。

#### HTML

```html
<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</div>
</div>
```

#### CSS

此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（`--size-0`），再用此尺寸计算其他尺寸。

* `--size-1` 所计算的为 `--size-0`（100px）的斜边长。将此值平方后——由于无其他值——返回此值的平方根，结果为 100px。
* `--size-2` 所计算的为两个 `--size-0`（100px）的斜边长。将此值平方后（100px \* 100px = 10000px2）再加上 `--size-0` 的平方（10000px2 + 10000px2 = 20000px2），返回和的平方根（√(20000px2)），结果为 141.42px。
* `--size-3` 所计算的为 `--size-0` \* 1.5（150px）和 `--size-0` \* 2（200px）的斜边长。其结果为这些值的平方和的平方根——将这些值平方（22500px2 和 40000px2）后相加（62500px2），用所得到的和再开平方根，结果为 250px。

```css
:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /\* 100px \*/
  --size-2: hypot(var(--size-0), var(--size-0)); /\* 141.42px \*/
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /\* 250px \*/
}
```

```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

再将这些尺寸应用于这些选择器的 `width` 和 `height` 值。

```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # exponent-funcs |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `pow()`
* `sqrt()`
* `log()`
* `exp()`


scroll-margin-block-end - CSS：层叠样式表

scroll-margin-block-end
=======================

**`scroll-margin-block-end`** 属性定义了滚动吸附区域在的块末外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
scroll-margin-block-end: 10px;
scroll-margin-block-end: 1em;

/\* 全局值 \*/
scroll-margin-block-end: inherit;
scroll-margin-block-end: initial;
scroll-margin-block-end: revert;
scroll-margin-block-end: revert-layer;
scroll-margin-block-end: unset;
```

### 取值

`<length>`

滚动容器的块末外边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin-block-end =
  <length>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


font-variant-caps - CSS：层叠样式表

font-variant-caps
=================

CSS属性 **`font-variant-caps`** 使你可以控制大写字母特殊字符的使用。

尝试一下
----

如果项目的字体库中包含不同大小的大写字母特殊字符，该属性将选择其中最接近指定大小的字符。例如，如果字体中没有“特小”(petite) 型大写字母，该字符将会被以“小”(small) 型大写字母进行渲染。如果这些字符均不存在，浏览器将用默认大写字符集进行尺寸加工。

字体库中有时会包含无大小写的特殊字符（例如标点符号）的不同写法来适应在文本中临近的大写字母。但是，小型大写字母永远不会被用来加工无大小写的字符。

### 多语言规则

这一属性被用来指定各种语言特定的映射规则。例如：

* 在突厥语系中 - 比如土耳其语（ISO 639-1代码‘tr’）、阿塞拜疆语（ISO 639-1代码‘az’）、克里米亚鞑靼语（ISO 639-3代码‘crh’）、鞑靼语（ISO 639-1代码‘tt’）和巴什基尔语（ISO 639-1代码‘ba’），有两种发音近似的“i”字母（区别在于一种有顶部的“.”，另一种没有），而它们的大小写写法也有区别：一种是`i`/`İ`，另一种是 `ı`/`I`。
* 在德语（ISO 639-1代码‘de’）中，`ß` 的大写可能会被写作`ẞ`（收录于通用字符集 U+1E9E）。
* 在希腊语（ISO 639-1代码‘el’）中，如果整个单词是大写的（`ά`/`Α`），元音将失去重音。（分离字母 eta（`ή`/`Ή`）除外。）除此之外，重音在第一个元音的双元音将失去重音，并被在第二个元音上加上一个变音符（`άι`/`ΑΪ`）.
语法
--

```css
/\* Keyword values \*/
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/\* Global values \*/
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;
```

`font-variant-caps` 属性使用以下列表中的单一关键词确定。在任一使用场景中，如果字体库不支持 OpenType 值，则会被尺寸加工。

### 可选值

`normal`

关闭一切特殊字符变体的使用。

`small-caps`

允许小型大写字母的使用（OpenType 特性：`smcp`）。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。

`all-small-caps`

将大小写字母全部转化为小型大写字母。（OpenType 特性：`c2sc`, `smcp`）。

`petite-caps`

允许特小型大写字母的使用（OpenType 特性：`pcap`）。

`all-petite-caps`

将大小写字母全部转化为小型大写字母。（OpenType 特性：`c2pc`, `pcap`）。

`unicase`

允许将大写字母转化为小型大写字母与普通小写字母的混用（OpenType 特性：`unic`）。

`titling-caps`

允许首字母大写（OpenType 特性：`titl`）。大写字母变体字符通常被设计成与用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。

### 形式语法
```

font-variant-caps =
  normal           |
  small-caps       |
  all-small-caps   |
  petite-caps      |
  all-petite-caps  |
  unicase          |
  titling-caps

```

示例
--

### HTML

```html
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
```

### CSS

```css
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}
```

### 结果

无障碍访问风险
-------

当大量文本信息的`font-variant`属性被设置为`all-small-caps`或`all-petite-caps`，将会为认知障碍者（如读写障碍）的阅读带来困难。

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* W3C Understanding WCAG 2.1
规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-caps-prop |

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<alpha-value> - CSS：层叠样式表

<alpha-value>
=============

CSS 数据类型 **`<alpha-value>`** 表示可为 `<number>` 或 `<percentage>` 的值，指定了颜色的 **alpha 通道 (en-US)**（即**透明度**）。

语法
--

`<alpha-value>` 的值由 `<number>` 或 `<percentage>` 所指定。

若指定为数，则可用范围为 0（完全透明）到 1.0（完全不透明），之间为十进制值，即 0.5 表示使用了一半的前景色和一半的背景色。虽然允许出现在 0 到 1 的范围外的值，但是这些值将被截断，使其处于 0 到 1 的范围中。

若以百分比指定 alpha 值，则 0% 对应完全透明，而 100% 表示完全不透明。

形式语法
----
```

<alpha-value> =
  <number>      |
  <percentage>

```

插值
--

在用于动画时，CSS 数据类型 `<alpha-value>` 的值按实值浮点数进行插值 (en-US)。插值速度由与动画关联的计时函数所决定。

示例
--

### 设置文本颜色不透明度

`rgb()` 函数接受可选的第四个参数用于指定 alpha 值。下列示例展示了如何使用 alpha 值应用有 60% 透明度的颜色：

```css
/\* <rgb()> \*/
color: rgb(34 12 64 / 60%);
```

### 设置形状图像的阈值

此处使用 alpha 值决定将图像的哪些部分视为形状的一部分：

```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |

参见
--

* 基本文本和字体样式
* CSS 数据类型
* CSS 颜色
* `<color>`


counter() - CSS：层叠样式表

counter()
=========

CSS 函数 **`counter()`**，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。

```css
/\* 简单使用 \*/
counter(计数器名称);

/\* 更改计数器显示 \*/
counter(countername, upper-roman)
```

一个计数器本身没有可见的效果，而是通过`counter()`函数（和`counters()`函数）返回开发人员定义的字符串（或图像）从而使计数器拥有很棒的作用。

**备注：** `counter()`函数可以与任何 CSS 属性一起使用，但是对`"content"`以外的属性的支持是试验性的，对 type-or-unit 参数的支持很少。

在使用此功能之前，请仔细检查浏览器兼容性表。

语法
--

### 值

`<custom-ident> 自定义标识`

一个标识计数器的名称，区分大小写，并且与`counter-reset`和`counter-increment`中的“名称”相同。名称不能以两个破折号开头，并且不能为`none`, `unset`, `initial`, 或 `inherit`。

`<counter-style> 计数器样式`

计数器样式名称或 `symbols()` (en-US) 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。

### 形式语法
```

counter( <custom-ident>, <counter-style>? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>
```

示例
--

### default value compared to upper Roman

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
    "]";
}
```

#### 结果

### *decimal-leading-zero* compared to lower-alpha

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == [" counter(
      count,
      lower-alpha
    )
    "]";
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 CSS 计数器
* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`
* CSS `counters()` 函数


inset-inline-end - CSS：层叠样式表

inset-inline-end
================

CSS 属性 **`inset-inline-end`** 定义了元素的逻辑行末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `top`、`right`、`bottom` 或 `left` 属性。

尝试一下
----

语法
--

```css
/\* 长度值 \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* 包含块的宽度或高度的百分比 \*/
inset-inline-end: 10%;

/\* 关键词值 \*/
inset-inline-end: auto;

/\* 全局值 \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;
```

`inset-inline-start` 和 `inset-inline-end` 的简写属性为 `inset-inline`。

### 取值

`inset-inline-end` 属性的取值与 `left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inset-inline-end =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### 设置行末偏移

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 定义其他偏移的属性：`inset-block-start`、`inset-block-end` 和 `inset-inline-start`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`


CSS Writing Modes CSS 写入模式 - CSS：层叠样式表

CSS Writing Modes CSS 写入模式
==========================

**CSS Writing Modes** is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).
 CSS 书写模式是一个 CSS 模块，它定义了各种国际书写模式，例如从左到右（例如拉丁和印度语脚本使用）、从右到左（例如希伯来语或阿拉伯语脚本使用）、双向（当混合从左到右和从右到左的脚本时使用）和垂直（例如使用 B 你的一些亚洲剧本）。

Reference 参考
------------

### Properties

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright` (en-US)
* `text-orientation`
* `unicode-bidi`
* `writing-mode`
规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4  |


grid - CSS：层叠样式表

grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback

**`grid`** 是一个 CSS 简写属性，可以用来设置以下属性：
 显式网格属性 `grid-template-rows`、`grid-template-columns` 和 `grid-template-areas`，
 隐式网格属性 `grid-auto-rows`、`grid-auto-columns` 和 `grid-auto-flow`，
 间距属性 `grid-column-gap` (en-US) 和 `grid-row-gap` (en-US)。

尝试一下
----

**备注：** 你仅可在一个 `grid` 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

语法
--

```css
/\* <'grid-template'> values \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/\* Global values \*/
grid: inherit;
grid: initial;
grid: unset;
```

### 值

`<'grid-template'>`

定义了 `grid-template`，其包含 `grid-template-columns`，`grid-template-rows` 和 `grid-template-areas`。

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`
 通过 `grid-template-rows` 属性显式设置行轨道来设置自动流（`grid-template-columns` 属性设为 `none`），并通过 `grid-auto-columns` 明确该如何自动重复列轨道（同时`grid-auto-rows`属性设为 auto）。`grid-auto-flow` 属性也被相应的设置为 `column`，并可附有 dense。

所有其余 `grid` 次级属性被重置为初始值。

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

 通过 `grid-template-columns` 属性显式设置列轨道来设置自动流（`grid-template-rows` 属性设为 `none`），并通过 `grid-auto-rows` 明确该如何自动重复行轨道（同时`grid-auto-columns`属性设为 `auto`）。`grid-auto-flow` 属性也被相应的设置为 `row`，并可附有 dense。
 所有其余 `grid` 次级属性被重置为初始值。

### 标准语法
```

grid =
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

```

实例
--

### HTML

```html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

### CSS

```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关 CSS 属性：`grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* *网格布局指南：Line-based placement with CSS Grid*
* *网格布局指南：Grid template areas - Grid definition shorthands*


伪类 - CSS：层叠样式表

伪类
==

CSS ***伪类***是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 `:hover` 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

```css
/\* 用户的指针悬停在其上的任何按钮 \*/
button:hover {
  color: blue;
}
```

伪类由冒号（`:`）后跟着伪类名称组成（例如，`:hover`）。函数式伪类还包含一对括号来定义参数（例如，`:dir()`）。附上了伪类的元素被定义为*锚元素*（例如，`button:hover` 中的 `button`）。

伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，`:visited`）、与其内容的状态有关的（如某些表单元素上的 `:checked`）或者与鼠标位置有关的（如 `:hover`，它可以让你知道鼠标是否在一个元素上）。

**备注：** 相较于伪类，伪元素可用于设置元素*特定部分*的样式。

元素显示状态伪类
--------

这些伪类可以基于元素的显示状态来选择它们。

`:fullscreen`

匹配当前处于全屏模式的元素。

输入状态伪类
------

这些伪类与表单元素相关，可以基于 HTML 属性或交互前后字段的状态来选择元素。

TBD

语言的伪类
-----

这些伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。

`:dir()` (en-US)

方向性伪类基于由文档语言所确定的其方向性来选择元素。

`:lang()` (en-US)

基于其内容语言来选择元素。

位置伪类
----

这些伪类与链接以及当前文档中的目标元素有关。

TBD

资源状态伪类
------

这些伪类应用于能够处于被描述为“正在播放”状态的媒体，例如视频。

TBD

时间方面的伪类
-------

这些伪类适用于查看有计时功能的东西，如 WebVTT 字幕轨。

TBD

树结构的伪类
------

这些伪类与文档树中的元素位置有关。

`:root`

表示文档的根元素。在 HTML 中这通常是 `<html>` 元素。

`:empty`

表示除空白字符外没有子元素的元素。

TBD

用户行为伪类
------

这些伪类需要用户进行一些交互才能够应用，例如将鼠标指针悬停在元素上。

TBD

函数式伪类
-----

这些伪类接受可容错选择器列表作为参数。

`:is()`

匹配与提供的列表中的任何选择器匹配的任何元素。

`:not()`

表示其参数中未表示的任何元素。

`:where()`

优先级调整伪类匹配与提供的列表中的任何选择器匹配的任何元素，但不添加任何优先级权重。

`:has()`

该关系伪类表示与任何一个与锚定的元素的相对选择器相匹配（如果有的话）的元素。

语法
--

```css
selector:pseudo-class {
  property: value;
}
```

像常规的类一样，你可以在选择器中将任意数量的伪类链在一起。

字母索引
----

由一组 CSS 规范定义的伪类包括以下内容：

A

* `:active`
* `:any-link`
* `:autofill`

B

* `:blank`
实验性

C

* `:checked`
* `:current` (en-US)
实验性

D

* `:default`
* `:defined`
* `:dir()`
实验性
* `:disabled`

E

* `:empty`
* `:enabled`

F

* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen`
* `:future` (en-US)
实验性
* `:focus`
* `:focus-visible`
* `:focus-within`

H

* `:has()`
实验性
* `:host`
* `:host()`
* `:host-context()`
实验性
* `:hover`

I

* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`

L

* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:local-link` (en-US)
实验性

M

* `:modal` (en-US)

N

* `:not()`
* `:nth-child()`
* `:nth-col()` (en-US)
实验性
* `:nth-last-child()`
* `:nth-last-col()` (en-US)
实验性
* `:nth-last-of-type()`
* `:nth-of-type()`

O

* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`

P

* `:past` (en-US)
实验性
* `:picture-in-picture`
* `:placeholder-shown`
* `:paused`
* `:playing`

R

* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`

S

* `:scope`
* `:state()`
实验性

T

* `:target`
* `:target-within` (en-US)
实验性

U

* `:user-invalid` (en-US)
实验性

V

* `:valid`
* `:visited`

W

* `:where()`
规范
--

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

参见
--

* 伪元素


hyphens - CSS：层叠样式表

hyphens
=======

CSS 属性 **`hyphens`** 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用 `xml:lang` 属性。

**备注：** 在规范中，没有明确定义连字符的实现规则，所以具体的连字符在不同浏览器中可能有所区别。

语法
--

```css
hyphens: none;
hyphens: manual;
hyphens: auto;

/\* Global values \*/
hyphens: inherit;
hyphens: initial;
hyphens: unset;
```

### 值

`none`

即便单词内有建议换行点也不会在那里换行。只会在空白符处换行。

`manual`

只有当单词内存在建议换行点时，才会在该位置断开单词并使用连字符换行。查看建议换行点了解详情。

`auto`

The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in Suggesting line break opportunities, should be preferred over automatically selecting break points whenever possible.

**备注：** `auto` 的行为取决于语言是否被正确地设置，以便可以选择适当的断词规则。你必须使用 HTML 属性 `lang` 指定语言，以确保自动断词在你选择的语言中得到应用。

建议换行点
-----

有两个 Unicode 字符可以用于在文本中手动指定可能的换行点：

U+2010（HYPHEN）

“硬”连字符表示一个可见的换行点。即使在指定的位置没有真正换行，连字符仍然会显示出来。

U+00AD（SHY）

一个不可见的“软”连字符。此字符不会在屏幕上显示出来，而是表示在必要时浏览器可能会在该位置断开单词并出现连字符。在 HTML 中，可以使用 `` 来插入软连字符。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `manual` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

### 形式语法
```

hyphens =
  none    |
  manual  |
  auto

```

示例
--

以下代码段展示了 `hyphens` 属性取 none/manual/auto 这三类值的效果。

```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extremely long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extremely long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extremely long English word</dd>
</dl>
```

```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `content`


:host() - CSS：层叠样式表

:host()
=======

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

CSS 伪类函数 **`:host()`** 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。

最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 `:host-context()` 的作用。

**备注：** 在 shadow DOM 之外使用时，这没有任何效果。

```css
/\* 选择阴影根元素，仅当它与选择器参数匹配 \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

语法
--
```

:host( <compound-selector> )
```

示例
--

以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

在这个例子中，有一个简单的自定义元素 `<context-span>` 可以用它包裹文本：

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

在元素的构造函数中，创建`style`和`span`元素，填充`span`自定义元素的内容，并`style`使用一些 CSS 规则填充元素：

```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

`:host(.footer) { color : red; }` 规则为文档中所有在其上设置了 `footer` 类的`<context-span>` 元素实例（此实例中的影子宿主）设置样式——使用它来为 `<footer>` 中的元素提供实例一种特殊的颜色。

规范
--

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Web components
* `:host-context()`
* `:host`


justify-items - CSS：层叠样式表

justify-items
=============

CSS 的 **`justify-items`** 属性为所有盒中的项目定义了默认的 `justify-self` ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

尝试一下
----

该属性的作用效果取决于我们使用的布局模式：

* 在块级布局中，会将其包含的项目在其行内轴上对齐；
* 绝对定位的元素中，会将其包含的项目在其行内轴上对齐，同时考虑 top、left、bottom、right 的值；
* 表格单元中，该属性被忽略（块级元素、绝对定位元素和表格布局中对齐的更多信息）；
* 弹性盒子布局中，该属性被忽略（弹性盒子中对齐的更多信息）；
* 栅格布局中，会将其栅格区域内的项目在其行内轴上对齐（栅格布局中对齐的更多信息 (en-US)）；
语法规则
----

```css
/\* Basic keywords \*/
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/\* Positional alignment \*/
justify-items: center; /\* Pack items around the center \*/
justify-items: start; /\* Pack items from the start \*/
justify-items: end; /\* Pack items from the end \*/
justify-items: flex-start; /\* Pack flex items from the start \*/
justify-items: flex-end; /\* Pack flex items from the end \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* Pack items from the left \*/
justify-items: right; /\* Pack items from the right \*/

/\* Baseline alignment \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* Overflow alignment (for positional alignment only) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* Legacy alignment \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/\* Global values \*/
justify-items: inherit;
justify-items: initial;
justify-items: unset;
```

此属性可以采用四种不同的形式之一：

* 关键词：关键字 `normal`，`auto`，或 `stretch` 任选其一
* 基线对齐：关键词 `baseline` ，可选 `first` 或 `last` 之一为前缀
* 位置对其：关键词 `center`，`start`，`end`，`flex-start`，`flex-end`，`self-start`，`self-end`，`left` 或 `right` 任选其一，可选 `safe` 或 `unsafe` 之一为前缀
* Legacy alignment: the `legacy` keyword, followed by one of `left` or `right`.
### 值

`auto`

使用的值是父元素的 justify-items 属性的值，除非该方框没有父元素，或者是绝对定位的，在这些情况下，`auto` 代表 `normal`。

`normal`

这个关键字的效果取决于我们所处的布局模式：

* 在块级布局中，相当于是 `start`。
* In absolutely-positioned layouts, the keyword behaved like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In table cell layouts, this keyword has no meaning as this property is *ignored*.
* In flexbox layouts, this keyword has no meaning as this property is *ignored.*
* In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.

`start`

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

`end`

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

`flex-start`

For items that are not children of a flex container, this value is treated like `start`.

`flex-end`

For items that are not children of a flex container, this value is treated like `end`.

`self-start`

The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

`self-end`

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

`center`

The items are packed flush to each other toward the center of the of the alignment container.

`left`

The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

`right`

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container.

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

`legacy`

Makes the value inherited by the box descendants. Note that if a descendant has a `justify-self: auto` value, the `legacy` keyword is not considered by the descend, only the `left`, `right`, or `center` value associated to it.

### Formal syntax
```

justify-items =
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-items-property |

|  |  |
| --- | --- |
| 初始值 | `legacy` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `place-items` shorthand property
* The `justify-self` property
* The `align-items` property


@namespace - CSS：层叠样式表

@namespace
==========

概述
--

**`@namespace`** 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。**@namespace**规则通常在处理包含多个 namespaces 的文档时才有用，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。

任何 `@namespace` 规则都必须在所有的 @charset 和 @import 规则之后，并且在样式表中，位于其他任何 style declarations 之前。

`@namespace` 可以用来定义默认命名空间。当定义过默认命名空间后，所有的通配选择器和类型选择器（但不包括属性选择器，详情看下面的 note）都只应用在这个命名空间的元素中。

`@namespace` 规则也可以用于定义\*\*命名空间前缀。\*\*当一个通配、类型、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与 元素名或属性匹配 的元素。

在 HTML5 中，已知的 foreign elements(“外语元素，比如 SVG 和 math 命名空间中的元素”) 将被自动加上命名空间。这意味着即使文档中没有任何 xmlns 属性，HTML 元素也将表现的如同他们在 XHTML 命名空间内 (`http://www.w3.org/1999/xhtml`) 一样，而 <svg> 和 <math> 元素则将被加上对应的命名空间 (`http://www.w3.org/2000/svg` 和`http://www.w3.org/1998/Math/MathML`).

**备注：** 在 XML 中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS 中的默认命名空间不会加到属性选择器中

语法
--

```css
/\* 默认命名空间 \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* 命名空间前缀 \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

### 标准语法
```

@namespace =
  @namespace <namespace-prefix>? [ <string> | <url> ] ;

<namespace-prefix> =
  <ident> (en-US)

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

示例
--

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* 匹配所有的 XHTML <a> 元素，因为 XHTML 是默认无前缀命名空间 \*/
a {
}

/\* 匹配所有的 SVG <a> 元素 \*/
svg|a {
}

/\* 匹配 XHTML 和 SVG <a> 元素 \*/
\*|a {
}
```

规范
--

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


-moz-image-rect - CSS：层叠样式表

-moz-image-rect
===============

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

The **`-moz-image-rect`** value for CSS `background-image` lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

This works very similarly to the `-moz-image-region` (en-US) property, which is used with the `list-style-image` property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

The syntax for the rectangle is similar to the `rect()` (en-US) function generating a `<shape>` (en-US) CSS type. All four values are relative to the upper left corner of the image.

Syntax
------
```

-moz-image-rect(`<uri>()` (en-US), top, right, bottom, left);
```

### Values

`<url>()`

The URI of the image from which to take the sub-image.

`top`

The top edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`right`

The right edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`bottom`

The bottom edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`left`

The left edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

### Formal syntax

Error: could not find syntax for this itemExample
-------

This example loads an image and uses it in four segments to draw the Firefox logo in four `<div>` blocks. Clicking on their container causes the four segments to rotate around by swapping the `background-image` property values among the four `<div>` blocks.

### CSS

The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

The container looks like this:

```css
#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}
```

Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

```css
#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file `firefox.jpg`.

```css
#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

This defines the top-right corner of the image.

The other corners follow a similar pattern:

```css
#box3 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
#box4 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

### HTML

The HTML is quite simple:

```html
<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>
```

This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger `<div>` block whose primary purpose is to receive click events and dispatch them to our JavaScript code.

### The JavaScript code

This code handles the click event when the container receives a mouse click.

```js
function rotate() {
  var prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // Now that we've saved the last one, start rotating

  for (var i = 1; i <= 4; i++) {
    var curId = "box" + i;

    // Shift the background images

    var curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}
```

This uses `window.getComputedStyle()` to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By simply copying the values of the `background-image` property from one element to the next with each mouse click, we achieve the desired effect.

### What it looks like

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


all - CSS：层叠样式表

all
===

CSS **`all`** 简写属性 将除了 `unicode-bidi` 与 `direction` 之外的所有属性重设至其初始值，或继承值。

尝试一下
----

语法
--

```css
/\* Global values \*/
all: initial
all: inherit
all: unset

/\* CSS Cascading and Inheritance Level 4 \*/
all: revert;
```

`all` 属性被作为 CSS 全局关键词的其中之一。不过需要注意的是，`unicode-bidi` 与 `direction` 这两个属性是不受 `all` 影响的

### 取值

`initial`

该关键字代表改变该元素或其父元素的所有属性至初始值。

`inherit`

该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values

`unset`

该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。

`revert` (en-US)

指定依赖于声明所属的样式表原点的行为：

User-agent origin

相当于 `unset`

User origin

将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。

Author origin

将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于`revert`的目的，“作者”原点包括“覆盖”和“动画”原点。

### 形式定义

|  |  |
| --- | --- |
| 初始值 | There is no practical initial value for it. |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but `unicode-bidi` and `direction`) |

### 形式语法
```

all =
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

```

示例
--

### HTML

```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS

```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### 结果

#### A. 没有 `all` 属性
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```

`<blockquote>` 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。

#### B. `all: initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}
```

`<blockquote>` 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 `background-color` 为 `transparent`（初始值），但其 `font-size` 仍为 `small`（继承值），其 `color` 为 `blue`（继承值）。

#### C. `all:initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}
```

`<blockquote>` 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 `background-color` 为 `transparent`（初始值），其 `font-size` 为 `normal`（初始值），其 `color` 为 `black`（初始值）。

#### D. `all:inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}
```

`<blockquote>` 没有使用浏览器默认样式：它现在是一个 block 元素（继承自其父元素 `<body>`），其 `background-color` 为 `transparent`（继承值），其 `font-size` 为 `small`（继承值），其 `color` 为 `blue`（继承值）。

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

CSS 通用属性值： `initial`、`inherit` 和 `unset`。


计算值 - CSS：层叠样式表

计算值
===

一个 CSS 属性的计算值是指这个属性在由父类转向子类的继承中的值。它通过指定值计算出来：

* 处理特殊的值 `inherit`，`initial`， `unset`和 `revert` (en-US)。
* 进行计算，以达到属性摘要中“计算值”行中描述的值。

计算值所需要的计算通常包括将相对值转换成绝对值 (如 em 单位或百分比)。例如，如一个元素的属性值为 `font-size:16px` 和 `padding-top:2em`, 则 `padding-top` 的计算值为 `32px` (字体大小的 2 倍).

然而，对于有些属性 (这些元素的百分比与需要布局确定后才能知道的值有关，如 `width`, `margin-right`, `text-indent`, 和 `top`)，它们的“百分比值”会转换成“百分比的计算值”。另外，line-height 属性值如是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在 应用值 确定后转换成绝对值。

**备注：** `getComputedStyle()` DOM API 返回 resolved value, 可能是 computed value 或 used value其中的一个，取决于属性。

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

参见
--

* `window.getComputedStyle`
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


accent-color - CSS：层叠样式表

accent-color
============

CSS 属性 **`accent-color`** 为某些元素所生成的用户界面控件设置了强调色。

尝试一下
----

支持 `accent-color` 属性的浏览器目前将其应用于下列 HTML 元素：

* `<input type="checkbox">`
* `<input type="radio">`
* `<input type="range">`
* `<progress>`
语法
--

```css
/\* 关键字值 \*/
accent-color: auto;

/\* <color> 值 \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/\* 全局值 \*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
```

### 取值

`auto`

表示用户代理所选颜色，应匹配平台的强调色（若有）。

`<color>`

指定用作强调色的颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | by computed value type |

形式语法
----
```

accent-color =
  auto     |
  <color>

```

示例
--

### 设置自定义强调色

#### HTML

```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```

#### CSS

```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `background-color`、`border-color`、`caret-color`、`color`、`column-rule-color`、`outline-color`、`text-decoration-color`、`text-emphasis-color` (en-US)、`text-shadow`——其他颜色相关属性
* `<color>`——相关数据类型
* `<input>`——相关 HTML 元素
* 使用 CSS 为 HTML 元素应用颜色


pointer-events - CSS：层叠样式表

pointer-events
==============

**`pointer-events`** CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。

```css
/\* Keyword values \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* SVG only \*/
pointer-events: visibleFill; /\* SVG only \*/
pointer-events: visibleStroke; /\* SVG only \*/
pointer-events: visible; /\* SVG only \*/
pointer-events: painted; /\* SVG only \*/
pointer-events: fill; /\* SVG only \*/
pointer-events: stroke; /\* SVG only \*/
pointer-events: all; /\* SVG only \*/

/\* Global values \*/
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
```

当此属性未指定时，`visiblePainted`值的相同特征适用于 SVG（可缩放矢量图形）内容。

除了指示该元素不是鼠标事件的目标之外，值`none`表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

`pointer-events`属性被指定为从下面的值列表中选择的一个关键字。

### 值

`auto`

与`pointer-events`属性未指定时的表现效果相同，对于 SVG 内容，该值与`visiblePainted`效果相同

`none`

元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的`pointer-events`属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

`visiblePainted`

只适用于 SVG。元素只有在以下情况才会成为鼠标事件的目标：

* `visibility`属性值为`visible`，且鼠标指针在元素内部，且`fill`属性指定了`none`之外的值
* `visibility`属性值为`visible`，鼠标指针在元素边界上，且`stroke`属性指定了`none`之外的值

`visibleFill`

只适用于 SVG。只有在元素`visibility`属性值为`visible`，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，`fill`属性的值不影响事件处理。

`visibleStroke`

只适用于 SVG。只有在元素`visibility`属性值为`visible`，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，`stroke`属性的值不影响事件处理。

`visible`

只适用于 SVG。只有在元素`visibility`属性值为`visible`，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，`fill`和`stroke`属性的值不影响事件处理。

`painted`

只适用于 SVG。元素只有在以下情况才会成为鼠标事件的目标：

* 鼠标指针在元素内部，且`fill`属性指定了`none`之外的值
* 鼠标指针在元素边界上，且`stroke`属性指定了`none`之外的值

`visibility`属性的值不影响事件处理。

`fill`

只适用于 SVG。只有鼠标指针在元素内部时，元素才会成为鼠标事件的目标，`fill`和`visibility`属性的值不影响事件处理。

`stroke`

只适用于 SVG。只有鼠标指针在元素边界上时，元素才会成为鼠标事件的目标，`stroke`和`visibility`属性的值不影响事件处理。

`all`

只适用于 SVG。只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，`fill`、`stroke`和`visibility`属性的值不影响事件处理。

示例
--

### 示例 1

```css
/\* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc \*/
img {
  pointer-events: none;
}
```

### 示例 2

点击链接 `http://example.com` 时，不会跳转

```html
<ul>
  <li><a href="https://developer.mozilla.org/">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```

```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

提示
--

使用`pointer-events`来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了`pointer-events`属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

我们希望为 HTML 提供更为精细的控制（而不仅仅是`auto`和`none`），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki 页面的 Use Cases 部分，以帮助我们如何针对 HTML 扩展`pointer-events`。

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对`body`元素应用`pointer-events：none`，禁用了包括`hover`在内的鼠标事件，从而提高滚动性能。

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* The SVG attribute `pointer-events`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content


选择器列表 - CSS：层叠样式表

选择器列表
=====

CSS **选择器列表**（`,`）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。

描述
--

当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白（字符）。

以下三个声明是等效的：

```css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
```

```css
span,
div {
  border: red 2px solid;
}
```

```css
:is(span, div) {
  border: red 2px solid;
}
```

示例
--

当对匹配不同条件的元素应用相同的样式时，将选择器编组进一个以逗号分隔的列表中可以在提高样式表的一致性的同时减小尺寸。

### 单行编组

此示例显示了将选择器编组进一个以逗号分隔的单行列表。

```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### 多行编组

此示例显示了将选择器编组进以逗号分隔的多行列表。

```css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}
```

有效和无效的选择器列表
-----------

一个无效的选择器匹配不到任何东西，因此不表示任何东西。当一个选择器列表包含一个无效的选择器时，整个样式块将被忽略，除了接受可容错选择器列表的函数式伪类。

### 无效的选择器列表

使用选择器列表的一个缺点是选择器列表中的单个不受支持的选择器会使整个规则无效化。

思考以下两个 CSS 规则集：

```css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}
```

它们不是等效的。在第一个规则集中，样式将应用于 `h1` 和 `h3` 元素，但 `h2:invalid-pseudo` 规则将不会被解析。在第二个规则集中，由于列表中的一个选择器是无效的，整个规则都将不会被解析。因此，没有样式会被应用到 `h1` 和 `h3` 元素：当一个选择器列表中任意选择器无效时，整个样式块将被忽略。

### 可容错选择器列表

解决无效的选择器列表问题的一种方法是使用 `:is()` 或 `:where()` 伪类，它们接受一个可容错选择器列表。可容错选择器列表中的每个选择器都被单独解析。因此列表中任何无效的选择器会被忽略，而有效的选择器则会被有效使用。

继续上一个示例，以下两个 CSS 规则集现在是等效的：

```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

这两个的区别在于 `:is()` 的优先级是它最具体的参数，而 `:where()` 选择器和可容错选择器列表参数则不添加任何优先级权重。

### 可容错相对选择器列表

可容错相对选择器列表类似于可容错选择器列表；它只是将列表的组成部分按相对选择器来解析，以显式或隐式的组合器开头。

```css
h2:has(+ p, > ul::after, + ul.red) {
  font-style: italic;
}
```

上面，紧跟在 `<p>` 或 `<ul class="red">` 之后的 `h2` 将会是斜体。虽然 `:has()` 可容错相对选择器列表参数中的伪元素是无效的，但因为列表是可容错的，它不会“中断”选择器。

规范
--

| Specification |
| --- |
| Selectors Level 4 # grouping |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 伪类 `:is()`、`:where()`、`:not()` 和 `:has()` 接受可容错选择器列表。
* CSS 选择器


文本装饰线厚度 (粗细) - CSS：层叠样式表

文本装饰线厚度 (粗细)
============

CSS 属性 **`text-decoration-thickness`** 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。

语法
--

```css
/\* Single keyword \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* length \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* percentage \*/
text-decoration-thickness: 10%;

/\* Global values \*/
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;
```

### 值

`auto`

由浏览器为文本装饰线选择合适的厚度。

`from-font`

如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值，则效果和设置为 `auto` 一样，由浏览器选择合适的厚度值。

`<length>`

将文本装饰线的厚度设置为一个 `<length>` 类型的值，覆盖掉字体文件建议的值或浏览器默认的值。

`<percentage>`

Specifies the thickness of the text decoration line as a `<percentage>` of **1em** in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

Formal definition
-----------------

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the font size of the element itself |
| 计算值 | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

text-decoration-thickness =
  auto                 |
  from-font            |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### Varying thickness

#### HTML

```html
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>
```

#### CSS

```css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}
```

#### Results

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-width-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `text-decoration`
* `text-underline-offset`


content - CSS：层叠样式表

content
=======

概要
--

CSS 的 `content` CSS 属性用于在元素的 `::before` 和 `::after` 伪元素中插入内容。使用 `content` 属性插入的内容都是匿名的*可替换元素*。

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | All elements, tree-abiding pseudo-elements, and page margin boxes |
| 是否是继承属性 | 否 |
| 计算值 | On elements, always computes to `normal`. On `::before` and `::after`, if `normal` is specified, computes to `none`. Otherwise, for URI values, the absolute URI; for `attr()` values, the resulting string; for other keywords, as specified. |
| Animation type | discrete |

语法
--
```

Formal syntax:
```
content =
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]?  |
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+

<counter> =
  <counter()>   |
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       |
  <gradient>

<counter()> =
  counter( <counter-name> , <counter-style>? )

<counters()> =
  counters( <counter-name> , <string> , <counter-style>? )

<content()> =
  content( [ text | before | after | first-letter | marker ]? )

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<id-selector> =
  <hash-token>

<url> =
  <url()>  |
  <src()>

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

```

```
```

content: normal                                /* Keywords that cannot be combined with other values */
content: none

content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. \00A0 for   */
content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter                       /* <counter> values */
content: attr(value string)                    /* attr() value linked to the HTML attribute value */
content: open-quote                            /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote

content: open-quote chapter_counter            /* Except for normal and none, several values can be used simultaneously */

content: inherit
```

### 值

`none`

不会产生伪类元素

`normal`

`:before` 和 `:after` 伪类元素中会被视为 `none`

<string>

文本内容

<uri> `url()`

URI 值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。

<counter>

计数器可以指定两种不同的函数：`counter()` 或 `counters()`。前面一个有两种形式：`counter(name)`或`counter(name,style)` 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由 style 指定（默认是'decimal'——十进制数字）。后一个函数同样也有两种形式：`counters(name,string)` 或 `counters(name,string,style)` 。The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.

`attr(X)`

将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。

`open-quote` | `close-quote`

这些值会被 `quotes` 中定义的字符串替换。

`no-open-quote` | `no-close-quote`

不会生产任何内容，但是会改变（增加或降低）引号层级。

示例
--

### 标题和引号

#### HTML

```html
<h1>5</h1>
<p>
  We shall start this with a quote from Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  Here we shall quote the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">
    Individuals must have the ability to shape the Internet and their own
    experiences on the Internet.</q
 >
  And so, we can infer that contributing to the open web, can protect our own
  individual experiences on it.
</p>
```

#### CSS

```css
q {
  color: #00008b;
  font-style: italic;
}

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

h1::before {
  content: "Chapter ";
}
```

#### 结果

### link 前面加一个 icon

#### HTML

```html
<a href="http://www.mozilla.org/en-US/">Home Page</a>
```

#### CSS

```css
a::before {
  content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
  font:
    x-small Arial,
    freeSans,
    sans-serif;
  color: gray;
}
```

#### 结果

### 自定义列表后面加加文字

#### HTML

```html
<div>
  <ul class="brightIdea">
    <li>This is my first idea</li>
    <li>and another good idea</li>
  </ul>
</div>
```

#### CSS

```css
/\* first import the icon from a suitable site \*/
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea li::after {
  content: "\1f4a1";
  font-family: "entypo", sans-serif;
}
```

#### 结果

### class based example

#### HTML

```html
<h2>Paperback best sellers</h2>
<ol>
  <li>Political thriller</li>
  <li class="newEntry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="newEntry">Vampire Romance</li>
</ol>
```

#### CSS

```css
/\* use a class rather that an element selector to give more flexibility.
Simple string example, but don't forget add a leading space in the text string
for spacing purposes \*/

.newEntry::after {
  content: " New!";
  color: red;
}
```

#### 结果

### rich link styling

#### HTML

```html
<ul>
  <li><a id="moz" href="http://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
  <li><a id="w3c" href="http://www.w3c.org/"> World Wide Web Consortium</a></li>
</ul>
```

#### CSS

```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico);
}

#mdn::before {
  content: url(mdn-favicon16.png);
}

li {
  margin: 1em;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `::after`, `::before`, `quotes`


应用值 - CSS：层叠样式表

应用值
===

CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 window.getComputedStyle (en-US) 获取。尺寸 (例如 `width`, `line-height`) 单位为像素，简写属性 (例如 background) 与组成属性相符 (例如 `background-color`，`display`) 与 `position`、`float` 相符，每个 CSS 属性都有值。

详情
--

计算出 CSS 属性的最终值有三个步骤。首先，指定值 specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出 计算值 computed value (en-US) (例如， `span` 指定 `position: absolute` 后`display` 变为 `block`)。最后，计算布局 (尺寸比如 `auto` 或 百分数 换算为像素值 )，结果即 **应用值 used value**。这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle (en-US) 获得最终的应用值。

举例
--

没有明确的宽度。指定的宽度：auto (默认). 计算的宽度：auto. 应用的宽度：998px (举例而言)。明确的宽度：50%. 指定的宽度：50%. 计算的宽度：50%. 应用的宽度：447px 明确的宽度：inherit. 指定的宽度：50%. 计算的宽度：50%. 应用的宽度：221px .

与计算值的区别
-------

CSS 2.0 只定义了 计算值 computed value (en-US) 作为属性计算的最后一步。CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height) 计算值与应用值一样，否则就会不一样 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

* background-position
* bottom, left, right, top
* height, width
* margin-bottom, margin-left, margin-right, margin-top,
* min-height, min-width
* padding-bottom, padding-left, padding-right, padding-top
* text-indent
规范
--

CSS Level 2: Used Values

另见
--

* CSS Reference (en-US)
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
* window.getComputedStyle (en-US)


CSS 多列布局 - CSS：层叠样式表

CSS 多列布局
========

**CSS 多列布局**（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

基本示例
----

在下列示例中，`column-count` 属性应用于带有 `container` 类的 `<div>` 元素。因为 `column-count` 的值为 `3`，所以内容排成等宽的 3 列。

与分片的关系
------

多列布局与分页媒体密切相关，因为每一个列框都成为一个片段，就像一个打印的页面成为整个文档的片段一样。因此，现在 CSS 分片规范中定义的属性需要控制内容如何在列之间断开。

参考
--

### 多列布局属性

* `column-count`
* `column-fill` (en-US)
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width` (en-US)
* `columns`
### 有关的 CSS 碎片化属性

* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
指南
--

多列的基本概念

多列布局的概述

设置列的样式

如何使用列的分隔线，以及设置列间距。

跨列与平衡

如何使元素跨越所有的列并控制列的填充方式。

在多列中控制溢出

当一个项目溢出它所在的列时或有太多的列内容无法容纳一个容器时，会发生什么。

多列中断开内容

介绍碎片化规范以及如何控制列内容的断开位置。

规范
--

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

参见
--

其他 CSS 布局方法包括：

* CSS 弹性盒子布局（CSS flexbox）
* CSS 网格布局