recursal/MDN huggingface dataset:
CSS Backgrounds and Borders
===========================

**CSS Backgrounds and Borders** 是 CSS 的一个模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，剪裁或调整大小，以及以其他方式修改。边框可以用线条或图像装饰，并制成方形或圆形。此外，元素框可以用阴影装饰。

Reference
---------

### CSS 属性

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow`
指南
--

工具
--

Using multiple backgrounds

Explains how to set one or more backgrounds on an element.

Scaling background images

Describes how to change the size and repeating behavior of background images.

Applying color to HTML elements using CSS

An overview of how CSS color can be used in HTML, including for borders.

Border-image 生成器

此交互式工具让你以可视化方式创建边框图像（`border-image` 属性）。

Border-radius 生成器

此交互式工具让你以可视化方式创建圆角（`border-radius` 属性）。

Box-shadow 生成器

此交互式工具让你以可视化方式创建元素身后的阴影（`box-shadow` 属性）。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |
语法
==

层叠样式表（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 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（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  |
: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()
======

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

总结
--

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

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

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

为在下方的框中查看滚动吸附，可在滚动式视口中上下左右地滚动经过含 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>`** 代表了一种既可以是 `<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
===============

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

`::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
/\* <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
============

**`: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
==================

**`: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
=========

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

`@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
===========

**`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
===========

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 属性的\*\*实际值（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
/\* 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
===========

**`::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.