recursal/MDN huggingface dataset:
fit-content()
=============

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
**`fit-content()`** CSS 函数将给定大小夹紧为可用大小 根据公式 `min(maximum size, max(minimum size, argument))`.


```css
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)
```


The function can be used as a track size in CSS Grid properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

The function can also be used as laid out box size for `width`, `height`, `min-width`, `min-height`, `max-width` and `max-height`, where the maximum and minimum sizes refer to the content size.

Syntax
------

The `fit-content()` function accepts a `<length>` or a `<percentage>` as an argument.

### Values

`<length>`

An absolute length.

`<percentage>`

 A percentage relative to the available space in the given axis.
 In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.


### Formal syntax

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

### CSS


```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML


```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>
```

### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # sizing-values |

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

### css.properties.grid-template-columns.fit-content

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

### css.properties.width.fit-content\_function

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-spacing
==============

概述
--

`border-spacing` 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 `cellspacing` 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

`border-spacing` 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 `border-collapse` 值是 `separate` 的时候。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | `table` and `inline-table` elements |
| 是否是继承属性 | yes |
| 计算值 | two absolute lengths |
| Animation type | discrete |

语法
--
```

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

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

### 值

*length*

描述单元格之间的水平和垂直距离的一个 `<length>` 值。它只在单值语法下使用。

*horizontal*

描述相邻两列的单元格之间的水平距离的一个 `<length>` 值。它只在双值语法下使用。

*vertical*

描述相邻两行的单元格之间的垂直距离的一个 `<length>` 值。它只在双值语法下使用。

`inherit`

一个表示父元素的 `border-spacing` 的计算值的关键字，其父元素必须应用了 `border-spacing` 。

### 正式语法
```

border-spacing =   
  <length>{1,2}    
  
```

示例
--

查看在线演示


```css
table {
  border-spacing: 10px 5px;
}
```

规范
--

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

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

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

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

The **`::-moz-range-progress`** CSS 伪元素 是一个 Mozilla 扩展 (en-US)。它代表了指示器在其中滑动的轨道的下部（即凹槽）是一个 `type="range"` 类型的 `<input>` 。此部分对应的值低于揪揪当前选择的值（即虚拟旋钮）。

**备注：** 在 `<input type="range">`上应用`::-moz-range-progress` 不会匹配任何元素，也不会有任何效果。

语法
--

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

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}
```

### 结果

使用了这个样式的进度条可能会看起来这样：

![](/zh-CN/docs/Web/CSS/::-moz-range-progress/screen_shot_2015-12-04_at_20.14.48.png)

规范
--

无内容

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

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

参见
--

* Gecko 用于设置范围输入的其他部分样式的伪元素：
    + `::-moz-range-thumb` (en-US) 代表在凹槽中滑动的指示器
    + `::-moz-range-track` (en-US) 代表有揪揪滑动的凹槽
* 其他浏览器使用的类似伪元素：
    + `::-ms-fill-upper`, Internet Explorer 和 Edge 支持的伪元素
* CSS-Tricks：使用 CSS 设置跨浏览器兼容范围输入的样式
* QuirksMode：样式和脚本滑块
transition-delay
================

CSS 的**transition-delay**属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 css 属性（**transition-property**）

|  |  |
| --- | --- |
| 初始值 | `0s` |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--


```css
/\* <time>?值 \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

/\* 全局变量 \*/
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
```

### 取值

`<time>`

表明动画效果属性生效之前需要等待的时间。

### 形式语法
```

transition-delay =   
  <time>#    
  
```

示例
--

### 展示不同的延迟

#### HTML


```html
<div class="box delay-1">0.5 秒</div>

<div class="box delay-2">2 秒</div>

<div class="box delay-3">4 秒</div>

<button id="change">变换</button>
```


#### CSS


```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}
```


#### JavaScript


```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transitions # transition-delay-property |

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

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

参见
--

* Using CSS transitions
* `TransitionEvent`
ID 选择器
======

CSS **ID 选择器**会根据该元素的 `id` 属性中的内容匹配元素。为了使该元素被选中，它的 `id` 属性必须与选择器中给出的值完全匹配。


```css
/\* id 为 "demo" 的元素会被选中 \*/
#demo {
  border: red 2px solid;
}
```

语法
--


```css
#id 属性值 { 样式声明 }
```


它与下面的`属性选择器`语句语法上等价（但优先级并不等价）：


```css
[id=id 属性值] { 样式声明 }
```

示例
--

### CSS


```css
#identified {
  background-color: skyblue;
}
```

### HTML


```html
<div id="identified">这个 div 有一个特别的 ID 属性！</div>
<div>这只是一个普通的 div。</div>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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

参见
--

* CSS 选择器
* 学习 CSS 选择器
text-orientation
================

**`text-orientation`** CSS 属性设定行中字符的方向。但它仅影响纵向模式（当 `writing-mode` 的值不是`horizontal-tb`）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。

尝试一下
----

语法
--


```css
/\* Keyword values \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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


`text-orientation` 应当被设置为上述关键字之一。

### 值

`mixed`

默认值。顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。

`upright`

将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 `direction` 被强制设为 `ltr`。

`sideways`

所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°。

`sideways-right`

处于兼容目的，`sideways` 的别名。

`use-glyph-orientation`

对于 SVG 元素，这个关键字导致使用已弃用的 SVG 属性。 `glyph-orientation-vertical` 和 `glyph-orientation-horizontal`。

形式化定义
-----

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

形式化语法
-----
```

text-orientation =   
  mixed     |  
  upright   |  
  sideways    
  
```

例子
--

### HTML


```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS


```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

参见
--

* The other vertical-script related CSS properties: `writing-mode`, `text-combine-upright` (en-US), and `unicode-bidi`.
* CSS Logical properties
* Styling vertical text (Chinese, Japanese, Korean and Mongolian)
* Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation
max-height
==========

CSS属性 **`max-height`** 设置元素的最大高度。它防止`height`属性的使用值（used value）大于 `max-height` 的指定值。

尝试一下
----

`max-height` 会覆盖`height`, 而`min-height` 会覆盖 `max-height`.

Syntax
------


```css
/\* <length> value \*/
max-height: 3.5em;

/\* <percentage> value \*/
max-height: 75%;

/\* Keyword values \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);

/\* Global values \*/
max-height: inherit;
max-height: initial;
max-height: unset;
```

### Values

`<length>`

Defines the `max-height` as an absolute value.

`<percentage>`

Defines the `max-height` as a percentage of the containing block's height.

`auto`

The browser will calculate and select a `max-height` for the specified element.

`none`

No limit on the size of the box.

`max-content`

The intrinsic preferred `max-height`.

`min-content`

The intrinsic minimum `max-height`.

`fit-content(`<length-percentage>`)`

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

### Formal syntax
```

max-height =   
  none                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------


```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

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

Ensure that elements set with a `max-height` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否是继承属性 | 否 |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `none`. |
| 计算值 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

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

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

See also
--------

* The box model, `box-sizing`
* `height`, `min-height`
:last-child
===========

**`:last-child`** CSS 伪类代表一组兄弟元素中的最后元素。

尝试一下
----

语法
--


```css
:last-child {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML


```html
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>
```


#### CSS


```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### 结果

### 为列表添加样式

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

参见
--

* `:-moz-last-node` (en-US) 
非标准
* `:last-of-type`
* `:first-child`
* `:nth-child`
-webkit-border-before
=====================

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

**`-webkit-border-before`** CSS 属性 是一种用于简写的属性。它用于在样式表的单个位置设置各个起始边框属性值。


```css
/\* Border values \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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


`-webkit-border-before` 可以使用以下一个或多个值：

1. `-webkit-border-before-width`
2. `-webkit-border-before-style`
3. `-webkit-border-before-color`.

它根据元素的书写模式、方向以及文本方向映射到 Border 上。对应到四个边框属性`border-top`、`border-right`、`border-bottom`或`border-left` ，具体取决于 `writing-mode`、`direction`、`text-orientation`三个属性定义的值。

这个属性和 `-webkit-border-after`、`-webkit-border-start`、`-webkit-border-end`三个属性用来定义元素的边界。

此属性在相关标准上的命名为 `border-block-start`.

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| Percentages | as each of the properties of the shorthand:* `-webkit-border-before-width`: logical-width of containing block
 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `color`: computed color
 |
| Animation type | discrete |

语法
--

### 可选择的值

按以下顺序，一个或多个值

`<'border-width'>`

参考 `border-width`

`<'border-style'>`

参考 `border-style`

`<'color'>`

参考 `color`

### 形式语法

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

### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}
```

规范
--

尽管它和 `border-block-start` 属性有关，但现在并不存在与任何一标准规范。

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

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

参见
--

* `border-block-start`
* The mapped physical properties: `border-top`, `border-right`, `border-bottom`, and `border-left`
* `writing-mode`, `direction`, `text-orientation`
CSS 布局手册
========

CSS 布局手册旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。

**备注：** 如果你是首次接触 CSS 布局，你可以先看一下 CSS 布局学习模块，其中的基础知识有利于你更好的使用本书中的布局样式。

布局专题
----

| 专题 | 描述 | 布局方法 |
| --- | --- | --- |
| 媒体对象 | 一个两栏的框，一边是图片，另一边是描述性文字，例如 facebook 上的帖子或推文。 | CSS 网格、`float` 回落、`fit-content` 尺寸 |
| 栏目布局 | 多栏、弹性盒或网格布局的取舍 | CSS 网格、多栏布局、弹性盒布局 |
| 元素居中 | 如何水平或者垂直居中内容。 | 弹性盒布局、盒子对齐 |
| 粘性页脚 | 创建一个页脚，当内容较短时，该页脚位于容器或视图的底部。 | CSS 网格、弹性盒 |
| 分离导航 | 一种导航模式，其中一些链接在视觉上与其他链接分开。 | 弹性盒、`margin` |
| 面包屑导航 | 创建链接列表，允许访问者在页面层次结构中向上导航。 | 弹性盒 |
| 含有计数徽章的列表 (en-US) | 一个带有 count 计数的徽章的 items 列表。 | 弹性盒、盒子对齐 |
| 分页 (en-US) | 链接到内容的某个页面（比如搜索结果）。 | 弹性盒、盒子对齐 |
| 卡片 | 卡片组件，显示在卡片网格中 | CSS 网格 |
| 网格包装器 (en-US) | 用于在一个中央包装器内对齐网格内容，同时也允许项目脱离。 | CSS 网格 |

贡献布局专题
------

作为 MDN 的一员，我们希望你能贡献一份与上表所示相同格式的布局专题。参见本页以获得编写示例的模板和指南。
margin-right
============

摘要
--

![The effect of the CSS margin-right property on the element box](/files/4041/margin-right.svg)**`margin-right`** 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠，称为 *margin collapsing*.

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

语法
--


```css
/\* <length> values \*/
margin-right: 20px; /\* An absolute length \*/
margin-right: 1em; /\* A length relative to the text size \*/
margin-right: 5%; /\* A margin relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-right: auto;

/\* Global values \*/
margin-right: inherit;
margin-right: initial;
margin-right: unset;
```

### 值

`<length>`

一个固定宽度 `<length>`值：可以是一个绝对宽度，e.g. in `px`, 也可以是一个相对宽度，e.g. in `em`, 或者相对视窗的大小，e.g. in `vh`.

`<percentage>`

以百分比为单位的 margin 值，计算时是相对于其最近的父级容器的宽度。

`auto`

auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent. | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | Internal `table-*` elements don't have margins, use `border-spacing` instead |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins. | Flexbox layout mode |

### 形式语法
```

margin-right =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

实例
--
```

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }
```

规范
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
counter-reset
=============

`counter-reset` 属性用于将 CSS 计数器 (en-US) 重置为制定值

尝试一下
----

**备注：** 计数器的值能够通过 CSS 属性 `counter-increment` 控制递增或递减。

语法
--


```css
/\* Set counter-name to 0 \*/
counter-reset: counter-name;

/\* Set counter-name to -1 \*/
counter-reset: counter-name -1;

/\* Set counter1 to 1, and counter2 to 4 \*/
counter-reset: counter1 1 counter2 4;

/\* Cancel any reset that could have been set in less specific rules \*/
counter-reset: none;

/\* Global values \*/
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
```


`counter-reset` 属性可以指定为以下之一：

* `<自定义 ID> [<数值>]`。你可以指定任意数量的计数器进行重置，每个名称或“名称 - 数字”对之间用空格分隔。
* 特殊值 `none`。
### 可选值

`<custom-ident>`

要递增的计数器的名称。


**备注：** 该名称由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和 / 或短划线（ - ）的组合组成，并且第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号）。此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。

`<integer>`

每次出现元素时将计数器重置为的值。如果不指定，则默认为 `0`。

`none`

该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。你可以指定要根据需要重置的计数器，每个计数器用空格分隔。

### 语法形式
```

counter-reset =   
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |  
  none                                                  
  
<reversed-counter-name> =   
  reversed( <counter-name> )    
  
```

示例
--


```css
h1 {
  counter-reset: chapter section 1 page;
  /\* Sets the chapter and page counters to 0
 and the section counter to 1. \*/
}
```

规范
--

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

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

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

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

参考
--

* CSS Counters (en-US), `counter-increment`
* `counter-increment`
* `counter-set`
* `@counter-style`
* `counter()` and `counters()` functions
* `content` property
unset
=====

CSS 关键字 **`unset`** 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于`inherit` ，在第二种情况下（非继承属性）类似于`initial`。它可以应用于任何 CSS 属性，包括 CSS 简写属性 `all` 。

示例
--

### Color

#### HTML


```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```


#### CSS


```css
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
```


#### 结果

### Border

#### HTML


```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited).</p>
</div>
```


#### CSS


```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit-initial |

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

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

参见
--

* 使用`initial`将属性设置为其初始值。
* 使用`revert` (en-US)将属性重置为 user-agent 样式表规定的值（或用户样式，如果存在）。
* 使用`inherit`使元素的属性与其父元素相同。
* `all`属性允许你一次将所有属性重置为其初始，继承，恢复或未设置状态。