recursal/MDN huggingface dataset:
object-position
===============

CSS 属性 **`object-position`** 规定了可替换元素的内容，在这里我们称其为对象（即 **`object-position`** 中的 **`object`**）在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景。

你还可以使用 `object-fit` 属性来改变可替换元素的对象的内在的大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/\* <percentage> 值 \*/
object-position: 25% 75%;

/\* <length> 值 \*/
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/\* 边缘偏移值 \*/
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/\* 全局关键字 \*/
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
```

### 取值

`<position>`

使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。


**备注：** 这些定位方式允许被替换元素的对象被定位到内容框外部。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `50% 50%` |
| 适用元素 | replaced elements |
| 是否是继承属性 | yes |
| Percentages | refer to width and height of element itself |
| 计算值 | as specified |
| Animation type | a repeatable list |

形式语法
----
```

object-position =   
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 定位图像内容

#### HTML

HTML 包含两个 `<img>` 元素，分别展示了 MDN 的 logo。


```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```


#### CSS

CSS 包括 `<img>` 元素本身的默认样式，以及两个图像各自的样式。


```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```


第一个图像的左边缘距元素框左边缘 10 个像素。第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方 10% 处。

#### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

参见
--

* 其他与图像相关的 CSS 属性：`object-fit`，`image-orientation`，`image-rendering`，`image-resolution` (en-US)。
媒体查询
====

**CSS 媒体查询**（media query）是响应式设计的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。

通常根据视口大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。

![笔记本电脑和移动设备具有不同的视口大小，可以使用媒体查询进行查询，我们可以看到内容布局的不同。](/zh-CN/docs/Web/CSS/CSS_media_queries/media-queries.svg)

在 CSS 中，可以使用 `@media` at 规则根据媒体查询的结果有条件地应用样式表的一部分。要有条件地应用整个样式表，请使用 `@import`。

在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。

### 在 HTML 中使用媒体查询

在 HTML 中，媒体查询可以应用于各种元素：

* 在 `<link>` 元素的 `media` 属性中，其定义待应用链接资源（通常是 CSS）的媒体。
* 在 `<source>` 元素的 `media` 属性中，其定义待应用源的媒体。（这仅在 `<picture>` 元素内有效。）
* 在 `<style>` 元素的 `media` 属性中，其定义待应用样式的媒体。
### 在 JavaScript 中使用媒体查询

在 JavaScript 中，你可以使用 `Window.matchMedia()` 方法根据媒体查询测试窗口。你还可以使用 `MediaQueryList.addListener()` 在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置、方向或状态的更改。

你可以在测试媒体查询中学到更多通过编程方式使用媒体查询的知识。

参考
--

### At 规则

* `@import`
* `@media`
指南
--

使用媒体查询

介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。

通过编程方式使用媒体查询

描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。

使用媒体查询增强无障碍 (en-US)

了解媒体查询如何帮助用户更好地了解你的网站。

打印

帮助改进 Web 内容打印输出的技巧和技术。

规范
--

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

参见
--

* 容器查询
* 使用 `@supports` 来根据浏览器支持的 CSS 技术应用样式。
:fullscreen
===========

**`:fullscreen`** CSS 伪类匹配当前处于全屏模式的所有元素。如果有多个元素被放置在全屏模式下，则此选择器将匹配所有这些元素。

语法
--


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

使用说明
----

当元素在全屏模式和正常模式之间切换时，`:fullscreen` 伪类允许你配置样式表以自动调整内容的大小、样式或布局。

示例
--

在这个示例中，按钮的颜色根据文档是否处于全屏模式而改变。这是在不需要使用 JavaScript 显式应用样式更改的情况下完成的。

### HTML

该页面的 HTML 如下所示：


```html
<h1>MDN Web 文档演示：:fullscreen 伪类</h1>

<p>
  此演示使用 <code>:fullscreen</code> 伪类完全使用 CSS
  来实现自动更改用于开启和关闭全屏模式的按钮的样式。
</p>

<button id="fs-toggle">切换全屏</button>
```


ID 为 `"fs-toggle"` 的 `<button>` 将根据文档是否处于全屏模式而在淡红色和淡绿色之间切换。

### CSS

CSS 中实现这一功能的关键在于两条规则。第一条规则用于在元素不处于全屏状态时设置“切换全屏模式”按钮的背景颜色。这里使用了 `:not(:fullscreen)` 伪类，以查找未应用 `:fullscreen` 伪类的元素。


```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```


当文档*处于*全屏模式时，将应用以下 CSS，将背景颜色设置为淡红色。


```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

规范
--

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

参见
--

* Fullscreen API
* Fullscreen API 指南
* `:not`
* `::backdrop`
* DOM API：`Element.requestFullscreen()`、`Document.exitFullscreen()` 和 `Document.fullscreenElement`
* `allowfullscreen` 属性
::marker
========

**`::marker`** CSS 伪元素匹配列表的标记框（通常为一个符号或数字）。它作用在任何设置了 `display: list-item` 的元素或伪元素上，例如 `<li>` 和 `<summary>` 元素。

尝试一下
----

允许的属性值
------

在将 `::marker` 作为选择器的规则中，只能使用某些 CSS 属性：

* 所有的字体属性
* `white-space` 属性
* `color` 属性
* `text-combine-upright` (en-US)、`unicode-bidi` 和 `direction` 属性
* `content` 属性
* 所有的 animation 和 transition 属性

**备注：** 规范指出，将来可能会支持其他 CSS 属性。

语法
--


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

示例
--

### HTML


```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS


```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

参见
--

* 默认拥有标记框的 HTML 元素：`<ol>`、`<li>`、`<summary>`
scroll-margin-bottom
====================

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

尝试一下
----

语法
--


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

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

### 取值

`<length>`

滚动容器的下外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-bottom =   
  <length>    
  
```

规范
--

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

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
Column combinator
=================

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

通过**列合并符** (`||`) 链接两个元素时，它只会匹配被第二个 CSS 选择器匹配的元素，且此元素属于被第一个 CSS 选择器匹配的列元素。


```css
/\* 属于"被选择"列的表单元格 \*/
col.selected||td {
  background: gray;
}
```

语法
--
```

column-selector || cell-selector {
  /* style properties */
}
```

示例
--

### HTML


```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS


```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

参见
--

* `<col>`
* `<colgroup>`
* `grid`
border-block-color
==================

CSS 属性 **`border-block-color`** 定义了元素的逻辑块向的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-color` 和 `border-bottom-color`，或者 `border-right-color` 和 `border-left-color` 属性。

尝试一下
----

另一方向的边框颜色可用 `border-inline-color` 设置，此属性会设置 `border-inline-start-color` 和 `border-inline-end-color`。

语法
--


```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-block-color =   
  <'border-top-color'>{1,2}    
  
```

示例
--

### 竖排文本的边框

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-color |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-color`、`border-right-color`、`border-bottom-color` 或 `border-left-color`
* `writing-mode`、`direction`、`text-orientation`
CSS 字体
======

**CSS 字体**是一个 CSS 模块，它定义了字体相关的属性和字体资源是如何加载的。它允许定义一个字体的样式，如字体家族、尺寸或字重、行高，以及对于一个字符有几个字形的字体时要使用的字形。

基础示例
----

以下示例展示了使用基本字体属性来对段落文本添加样式的方法。


```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```



```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out on an antique bed<br />
  An' my spirit did a midnite creep
</p>
```


它的结果如下所示：

可变字体示例
------

你可以在 v-fonts.com 和 axis-praxis.org 找到可变字体示例；参见可变字体指南以获取更多信息。

参考文献
----

### 属性

* `font`
* `font-family`
* `font-feature-settings`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-synthesis`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-weight`
* `line-height`
### @ 规则

* `@font-face`
* `@font-feature-values`
指南
--

文本和字体样式基础

在这篇面向初学者的文章中，我们详细介绍了文本和字体样式的基础知识，包括设置字重、字体家族和样式、字体简写、文本对齐和其他效果，以及行和字母间距。

OpenType 字体特性指南

字体特性（font feature）或变体（variant）指的是在同一个 OpenType 字体中包含的不同的字形或字符风格。它包括了连字（ligature，由字符组合而成的特殊字形，如“ﬁ”或“ﬄ” ）、字偶距（kerning，调整特定字母组合的间距）、分数形式、数字风格，和一票其他内容。这些都被称为 OpenType 特性，而且可以通过特定属性和一种底层属性指定（见 `font-feature-settings`）来控制。本文将介绍在 CSS 中使用 OpenType 字体特性的全部内容。

可变字体指南

**可变字体指南**是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。本文将介绍你需要知道的有关使用可变字体的所有内容。

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4  |
CSS Counter Styles
==================

**CSS 计数器样式** is 是一个让你自定义计数器样式的 CSS 模块。

参考
--

### 属性

* `counter-increment`
* `counter-reset`
### At-rules

* `@counter-style`
    + `system` (en-US)
    + `additive-symbols`
    + `negative` (en-US)
    + `prefix` (en-US)
    + `suffix` (en-US)
    + `range` (en-US)
    + `pad`
    + `speak-as`
    + `fallback` (en-US)
指南
--

使用 CSS 计数器

描述如何使用计数器来给 HTML 元素计数，或者执行复杂的计数

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

{{Compat}}
border-collapse
===============

**`border-collapse`** CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

尝试一下
----

合并（*collapsed*）模式下，表格中相邻单元格共享边框。在这种模式下，CSS 属性`border-style` 的值 inset 表现为槽，值 outset 表现为脊。

分隔（\*separated）\*模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 属性 `border-spacing` 来确定的。

语法
--


```css
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

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


`border-collapse` 的属性值被定义为一个单独的关键词，可为下面两个值中的一个。

### 值

`collapse`

相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

`separate`

默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。

### 正式语法
```

border-collapse =   
  separate  |  
  collapse    
  
```

示例
--

### 各个浏览器引擎的多彩表格

#### HTML


```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```


#### CSS


```css
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th,
table td {
  border: solid 3px;
}
.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ie {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

参见
--

* `border-spacing`、`border-style`
* The `border-collapse` property alters the appearance of the `<table>` HTML element.
scroll-padding-block
====================

简写属性 **`scroll-padding-block`** 设置了元素的块向滚动内边距。

尝试一下
----

滚动内边距属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `scroll-padding-block-end`
* `scroll-padding-block-start`
语法
--


```css
/\* 关键字值 \*/
scroll-padding-block: auto;

/\* <length> 值 \*/
scroll-padding-block: 10px;
scroll-padding-block: 1em 0.5em;
scroll-padding-block: 10%;

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

### 取值

`<length-percentage>`

滚动口对应边的内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as each of the properties of the shorthand:* `scroll-padding-block-start`: as specified
* `scroll-padding-block-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-block =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
column-rule-style
=================

CSS 特性 `column-rule-color` 让你可以设置在多列布局中被画在两列之间的规则（线条）的样式。

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

Syntax
------
```

Formal syntax: 
```
column-rule-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```


```
```

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

column-rule-style: inherit;
```

### Values

<br-style>

Is a keyword defined by `border-style` describing the style of the rule. The styling must be interpreted as in the collapsing border model.

Example
-------


```css
#header {
  -moz-column-rule-style: inset;
}
```

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crs |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:-moz-drag-over
===============

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

**`:-moz-drag-over`** CSS 伪类是一个 Mozilla 扩展 (en-US)，用于在调用 `dragover` 事件时匹配一个元素。

语法
--


```css
:-moz-drag-over {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### CSS


```css
td:-moz-drag-over {
  color: red;
}
```

### 结果

规范
--

不属于任何标准。

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

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

参见
--

* Mozilla CSS 扩展 (en-US)
* HTML 拖放
text-decoration-color
=====================

CSS 属性 **`text-decoration-color`** 用于设置文本修饰线的颜色，文本修饰线是通过 `text-decoration-line` 属性指定的。

修饰线包括下划线、上划线、删除线和波浪线，波浪线的典型用途是标明内容拼写错误（仅举例）。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

尝试一下
----

CSS 没有直接的机制为每种线型指定唯一的颜色，不过可以通过嵌套元素的方法来实现这种效果：用 `text-decoration-line` 属性为每个元素应用一种线型，再用 `text-decoration-color` 指定线的颜色。

语法
--


```css
/\* <color> values \*/
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/\* Global values \*/
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
```

### 值

`<color>`

修饰文本的线的颜色。

### 形式语法
```

text-decoration-color =   
  <color>    
  
```

示例
--


```html
<p>
  This paragraph has 
some erroneous text
 inside it that I want to call
  attention to.
</p>
```



```css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

Accessibility concerns
----------------------

It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enouch to indicate a link has focus.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-color-property |

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

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

参见
--

* 当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。
* `<color>` 数据类型
* 其他与颜色相关的属性：`background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color` (en-US), `text-shadow`, `caret-color`, 和 `column-rule-color`
* 使用 CSS 为 HTML 设置颜色
line-break
==========

设置 CSS 属性 **`line-break`** 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行。


```css
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/\* Global values \*/
line-break: inherit;
line-break: initial;
line-break: unset;
```


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

语法
--

### 值

`auto`

使用默认的断行规则分解文本。

`loose`

使用尽可能松散（least restrictive）的断行规则分解文本。一般用于短行的情况，如报纸。

`normal`

使用最一般（common）的断行规则分解文本。

`strict`

使用最严格（stringent）的断行原则分解文本。

`anywhere`

在每个印刷字符单元（typographic character unit）的周围，都有一个自动换行（soft wrap）的机会，包括任何标点符号（punctuation character）或是保留的空白字符（preserved white spaces），或是单词之间。但忽略任何用于阻止换行的字符，即使是来自 GL、WJ 或 ZWJ 字符集的字符，或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符（hyphenation，可能是 "-"）。

英文原文：There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

### 正式语法
```

line-break =   
  auto      |  
  loose     |  
  normal    |  
  strict    |  
  anywhere    
  
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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