recursal/MDN huggingface dataset:
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 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 属性 可以取百分比值，经常用以根据父对象来确定大小。百分比值由一个`<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()
===============

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
/\* 在任意图像后的兄弟段落 \*/
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
======

**`: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** 基本数据类型是 组件值类型 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()`** 为指数型函数，返回其参数平方和的平方根。

尽管 `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
=======================

**`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`** 使你可以控制大写字母特殊字符的使用。

尝试一下
----

如果项目的字体库中包含不同大小的大写字母特殊字符，该属性将选择其中最接近指定大小的字符。例如，如果字体中没有“特小”(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>`** 表示可为 `<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()`**，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<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`** 定义了元素的逻辑行末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据 `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 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  |
伪类
==

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  |

参见
--

* 伪元素