recursal/MDN huggingface dataset:
hyphens
=======

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

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

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

语法
--


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

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

### 值

`none`

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

`manual`

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

`auto`

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


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

建议换行点
-----

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

U+2010（HYPHEN）

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

U+00AD（SHY）

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

形式定义
----

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

### 形式语法
```

hyphens =   
  none    |  
  manual  |  
  auto      
  
```

示例
--

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


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



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

规范
--

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

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

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

参见
--

* `content`
:host()
=======

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

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

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

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


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

语法
--
```

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

示例
--

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

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


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


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


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

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

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


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

规范
--

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

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

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

参见
--

* Web components
* `:host-context()`
* `:host`
@namespace
==========

概述
--

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

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

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

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

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

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

语法
--


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

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

### 标准语法
```

@namespace =   
  @namespace <namespace-prefix>? [ <string> | <url> ] ;    
  
<namespace-prefix> =   
  <ident> (en-US)    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

示例
--


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

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

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

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

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
计算值
===

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

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

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

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

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

规范
--

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

参见
--

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

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

尝试一下
----

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

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


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

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

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

### 取值

`auto`

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

`<color>`

指定用作强调色的颜色。

形式定义
----

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

形式语法
----
```

accent-color =   
  auto     |  
  <color>    
  
```

示例
--

### 设置自定义强调色

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

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

CSS **选择器列表**（`,`）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。

描述
--

当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白（字符）。

以下三个声明是等效的：


```css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
```



```css
span,
div {
  border: red 2px solid;
}
```



```css
:is(span, div) {
  border: red 2px solid;
}
```

示例
--

当对匹配不同条件的元素应用相同的样式时，将选择器编组进一个以逗号分隔的列表中可以在提高样式表的一致性的同时减小尺寸。

### 单行编组

此示例显示了将选择器编组进一个以逗号分隔的单行列表。


```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### 多行编组

此示例显示了将选择器编组进以逗号分隔的多行列表。


```css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}
```

有效和无效的选择器列表
-----------

一个无效的选择器匹配不到任何东西，因此不表示任何东西。当一个选择器列表包含一个无效的选择器时，整个样式块将被忽略，除了接受可容错选择器列表的函数式伪类。

### 无效的选择器列表

使用选择器列表的一个缺点是选择器列表中的单个不受支持的选择器会使整个规则无效化。

思考以下两个 CSS 规则集：


```css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}
```


它们不是等效的。在第一个规则集中，样式将应用于 `h1` 和 `h3` 元素，但 `h2:invalid-pseudo` 规则将不会被解析。在第二个规则集中，由于列表中的一个选择器是无效的，整个规则都将不会被解析。因此，没有样式会被应用到 `h1` 和 `h3` 元素：当一个选择器列表中任意选择器无效时，整个样式块将被忽略。

### 可容错选择器列表

解决无效的选择器列表问题的一种方法是使用 `:is()` 或 `:where()` 伪类，它们接受一个可容错选择器列表。可容错选择器列表中的每个选择器都被单独解析。因此列表中任何无效的选择器会被忽略，而有效的选择器则会被有效使用。

继续上一个示例，以下两个 CSS 规则集现在是等效的：


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```


这两个的区别在于 `:is()` 的优先级是它最具体的参数，而 `:where()` 选择器和可容错选择器列表参数则不添加任何优先级权重。

### 可容错相对选择器列表

可容错相对选择器列表类似于可容错选择器列表；它只是将列表的组成部分按相对选择器来解析，以显式或隐式的组合器开头。


```css
h2:has(+ p, > ul::after, + ul.red) {
  font-style: italic;
}
```


上面，紧跟在 `<p>` 或 `<ul class="red">` 之后的 `h2` 将会是斜体。虽然 `:has()` 可容错相对选择器列表参数中的伪元素是无效的，但因为列表是可容错的，它不会“中断”选择器。

规范
--

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

参见
--

* 伪类 `:is()`、`:where()`、`:not()` 和 `:has()` 接受可容错选择器列表。
* CSS 选择器
文本装饰线厚度 (粗细)
============

CSS 属性 **`text-decoration-thickness`** 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。

语法
--


```css
/\* Single keyword \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* length \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* percentage \*/
text-decoration-thickness: 10%;

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

### 值

`auto`

由浏览器为文本装饰线选择合适的厚度。

`from-font`

如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值，则效果和设置为 `auto` 一样，由浏览器选择合适的厚度值。

`<length>`

将文本装饰线的厚度设置为一个 `<length>` 类型的值，覆盖掉字体文件建议的值或浏览器默认的值。

`<percentage>`

Specifies the thickness of the text decoration line as a `<percentage>` of **1em** in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

Formal definition
-----------------

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the font size of the element itself |
| 计算值 | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

text-decoration-thickness =   
  auto                 |  
  from-font            |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### Varying thickness

#### HTML


```html
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>
```


#### CSS


```css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}
```


#### Results

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-width-property |

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

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

相关链接
----

* `text-decoration`
* `text-underline-offset`
应用值
===

CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 window.getComputedStyle (en-US) 获取。尺寸 (例如 `width`, `line-height`) 单位为像素，简写属性 (例如 background) 与组成属性相符 (例如 `background-color`，`display`) 与 `position`、`float` 相符，每个 CSS 属性都有值。

详情
--

计算出 CSS 属性的最终值有三个步骤。首先，指定值 specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出 计算值 computed value (en-US) (例如， `span` 指定 `position: absolute` 后`display` 变为 `block`)。最后，计算布局 (尺寸比如 `auto` 或 百分数 换算为像素值 )，结果即 **应用值 used value**。这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle (en-US) 获得最终的应用值。

举例
--

没有明确的宽度。指定的宽度：auto (默认). 计算的宽度：auto. 应用的宽度：998px (举例而言)。明确的宽度：50%. 指定的宽度：50%. 计算的宽度：50%. 应用的宽度：447px 明确的宽度：inherit. 指定的宽度：50%. 计算的宽度：50%. 应用的宽度：221px .

与计算值的区别
-------

CSS 2.0 只定义了 计算值 computed value (en-US) 作为属性计算的最后一步。CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height) 计算值与应用值一样，否则就会不一样 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

* background-position
* bottom, left, right, top
* height, width
* margin-bottom, margin-left, margin-right, margin-top,
* min-height, min-width
* padding-bottom, padding-left, padding-right, padding-top
* text-indent
规范
--

CSS Level 2: Used Values

另见
--

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

**CSS 多列布局**（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

基本示例
----

在下列示例中，`column-count` 属性应用于带有 `container` 类的 `<div>` 元素。因为 `column-count` 的值为 `3`，所以内容排成等宽的 3 列。

与分片的关系
------

多列布局与分页媒体密切相关，因为每一个列框都成为一个片段，就像一个打印的页面成为整个文档的片段一样。因此，现在 CSS 分片规范中定义的属性需要控制内容如何在列之间断开。

参考
--

### 多列布局属性

* `column-count`
* `column-fill` (en-US)
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width` (en-US)
* `columns`
### 有关的 CSS 碎片化属性

* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
指南
--

多列的基本概念

多列布局的概述

设置列的样式

如何使用列的分隔线，以及设置列间距。

跨列与平衡

如何使元素跨越所有的列并控制列的填充方式。

在多列中控制溢出

当一个项目溢出它所在的列时或有太多的列内容无法容纳一个容器时，会发生什么。

多列中断开内容

介绍碎片化规范以及如何控制列内容的断开位置。

规范
--

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

参见
--

其他 CSS 布局方法包括：

* CSS 弹性盒子布局（CSS flexbox）
* CSS 网格布局
aspect-ratio
============

CSS 属性 **`aspect-ratio`** 为盒子规定了**首选纵横比**，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

尝试一下
----


```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/\* 全局值 \*/
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;
```

### 取值

`auto`

具有固有纵横比的可替换元素将使用此纵横比，否则盒子无首选纵横比。涉及固有纵横比的尺寸计算始终使用内容盒的尺寸。

`<ratio>`

盒子的首选纵横比为指定的 `width` / `height` 比率。如果省略 `height` 和前面的斜杠字符，则 `height` 默认为 `1`。涉及首选纵横比的尺寸计算使用由 `box-sizing` 所指定的盒子的尺寸。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements except inline boxes and internal ruby or table boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

aspect-ratio =   
  auto     ||  
  <ratio>    
  
<ratio> =   
  <number [0,∞]> [ / <number [0,∞]> ]?    
  
```

示例
--

### aspect-ratio 的取值示例


```css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

参见
--

* 图像的 aspect-ratio：防止卡顿
* 为 CSS 设计纵横比单位
* 设置图像的高度和宽度再次变得重要起来
::placeholder
=============

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

伪元素\*\*`::placeholder`\*\*可以选择一个表单元素的占位文本 (en-US)，它允许开发者和设计师自定义占位文本 (en-US)的样式。


```css
::placeholder {
  color: red;
  font-size: 1.5em;
}
```


在使用了`::placeholder`伪元素的选择器中，仅有小一部分 CSS 属性可以使用，这个集合可以参考`::first-line`伪元素。

语法
--

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

### 红色文本

#### HTML


```html
<input placeholder="我是红色的！" />
```


#### CSS


```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```


#### 结果

### 绿色文本

#### HTML


```html
<input placeholder="而我是绿色的！" />
```


#### CSS


```css
input::placeholder {
  color: green;
}
```


#### 结果

规范
--

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

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

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

相似阅读
----

* `:placeholder-shown`
* 与此伪元素选择器功能相同的几个浏览器私有选择器：
    + `::-webkit-input-placeholder` (en-US)
    + `::-moz-placeholder` (en-US)
    + `:-ms-input-placeholder` (en-US)
* Forms in HTML (en-US)
* `<input>`
* `<textarea>`
:root
=====

**`:root`** 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，**`:root`** 表示 `<html>` 元素，除了优先级更高之外，与 `html` 选择器相同。


```css
/\* 选择文档的根元素（HTML 中的 <html>） \*/
:root {
  background: yellow;
}
```

语法
--


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

示例
--

### 声明全局 CSS 变量

在声明全局 CSS 变量时 **`:root`** 会很有用：


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

参见
--

* `<html>`
* `Document.rootElement` (en-US)
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`
伪元素
===

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 `::first-line` 伪元素可改变段落首行文字的样式。


```css
/\* 每一个 <p> 元素的第一行。 \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```


**备注：** 与伪元素比较，`pseudo-classes` 能够根据*状态*改变元素样式。

语法
--


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


一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

**备注：** 按照规范，应该使用双冒号（`::`）而不是单个冒号（`:`），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

字母索引
----

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

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region` (en-US)

F

* `::first-letter`
* `::first-line`
* `::file-selector-button`

G

* `::grammar-error` 
实验性

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error` 
实验性

T

* `::target-text` 
实验性
规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

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

| 浏览器 | 最低版本 | 支持的伪元素 |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudo-element` |
| 9.0 | `:pseudo-element ::pseudo-element` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

参见
--

* 伪类
border-right-width
==================

CSS 的\*\*`border-right-width`\*\* 用来设置盒子右边框的宽度。

尝试一下
----

语法
--


```css
/\* Keyword values \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> values \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/\* Global keywords \*/
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;
```

### 数值

`<line-width>`

定义边框的宽度，或者作为显性非负的长度值 `<length>` 或者是关键字。如果他是一个关键字，它必须是下列值的一种：

* `thin` 一个细边框
* `medium` 一个中等边框
* `thick` 一个粗边框

**备注：** 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。

### 形式语法
```

border-right-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

示例
--

### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```

### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length or `0` if `border-right-style` is `none` or `hidden` |
| Animation type | a length |

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

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

参见
--

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

**`direction`** CSS 属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 `rtl`；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 `ltr`。

尝试一下
----

请注意，文本方向通常在文档中定义（例如，使用 HTML 的 `dir` 属性 属性），而不是通过直接使用 `direction` 属性来定义。

该属性设置可以设置块级元素文本的基本方向，也可以设置由通过 `unicode-bidi` 属性创建的嵌入元素的方向。与此同时，它还可以设置文本、块级元素的默认对齐方式，以及表行中的单元格的流动方向。

与 HTML 中的 `dir` 属性不同，`direction` 属性不会从表列继承到表单元格，因为 CSS 继承遵从文档流，而表单元格位于行内部，但不在列内部。

`direction` 和 `unicode-bidi` 属性是唯二不受 `all` 简写属性影响的属性。

语法
--


```css
/\* 关键字值 \*/
direction: ltr;
direction: rtl;

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

### 取值

`ltr`

默认属性。可设置文本和其他元素的默认方向是从左到右。

`rtl`

可设置文本和其他元素的默认方向是从右到左。

要使 `direction` 属性在行级元素上生效，`unicode-bidi` 属性的值必须是 `embed` 或 `override`。

### 形式定义

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

### 形式语法
```

direction =   
  ltr  |  
  rtl    
  
```

示例
--

### 设置从右往左的方向

在下面的例子中有两个文本字符串，都使用 `direction: rtl` 来显示。尽管这种设置可以正确显示阿拉伯文本，但中文内容却有一个标点符号在一个不寻常的位置。


```css
blockquote {
  direction: rtl;
  width: 300px;
}
```



```html
<blockquote>
  <p>这个段落用中文书写的，但是方向是从右到左，是错误的。</p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>
```

规范
--

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

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

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

参见
--

* `unicode-bidi`
* `writing-mode`
* HTML 的 `dir` 全局属性