recursal/MDN huggingface dataset:
overflow-anchor
===============

**`overflow-anchor`** CSS 属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。因此，仅当你在文档或文档的一部分中遇到滚动锚定问题并且需要关闭行为时，才通常需要更改此属性的值。

语法
--


```css
/\* Keyword values \*/
overflow-anchor: auto;
overflow-anchor: none;

/\* Global values \*/
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: unset;
```

### Values

`auto`

The element becomes a potential anchor when adjusting scroll position.

`none`

The element won't be selected as a potential anchor.

### Formal syntax
```

overflow-anchor =   
  auto  |  
  none    
  
```

范例
--

To prevent scroll anchoring in a document, use the `overflow-anchor` property.


```css
body {
  overflow-anchor: none;
}
```

规范
--

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

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

See also
--------

* Guide to scroll anchoring (en-US)
:any-link
=========

**`:any-link`** CSS 伪类选择器表示作为超链接源锚点的元素，无论是否已被访问。换言之，它匹配每个具有 `href` 属性的 `<a>` 或 `<area>` 元素。因此，它匹配所有匹配 `:link` 或 `:visited` 的元素。

尝试一下
----

语法
--


```css
:any-link {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<a href="https://example.com">外部链接</a><br />
<a href="#">内部目标链接</a><br />
<a>占位符链接（不会有样式）</a>
```

### CSS


```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit 浏览器 \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

参见
--

* 创建超链接
* 匹配 HTML 元素：具有 `href` 属性的 `<a>` 和 `<area>`
* 相关的 CSS 选择器：
    + `:visited`
    + `:link`
opacity
=======

概述
--

opacity 属性指定了一个元素的**不透明度**。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。

当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。

使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的层叠上下文中。

|  |  |
| --- | --- |
| 初始值 | `1` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | map to the range `[0,1]` |
| 计算值 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

语法
--


```css
/\* 完全不透明 \*/
opacity: 1;
opacity: 1;

/\* 半透明 \*/
opacity: 0.6;

/\* 完全透明 \*/
opacity: 0;
opacity: 0;

opacity: inherit;
```

### 属性值

`<number>`

`<number>` 是一个 0.0 到 1.0 范围内的数字值，这个数值既包含也代表通道的透明度，也就是 alpha 通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。

| 值 | 释义 |
| --- | --- |
| `0` | 元素完全透明 (即元素不可见). |
| 任何一个位于 0.0-1.0 之间的 `<number>` | 元素半透明 (即元素后面的背景可见). |
| `1` | 元素完全不透明 (即元素后面的背景不可见). |

### 形式语法
```

opacity =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 基本示例


```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}
```



```html
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
```

### :hover 时 opacity 的不同


```css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /\* IE8 and lower \*/
  zoom: 1; /\* Triggers "hasLayout" in IE 7 and lower \*/
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```



```html
<img
 src="//developer.mozilla.org/media/img/mdn-logo.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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

参见
--

* MSDN Microsoft's filter:alpha(opacity=xx)
box-orient
==========

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

这是原始的 css 弹性布局草案的一个属性，已经被最新的标准替代。查看 flexbox (en-US) 了解现行标准。

**`box-orient`** CSS 属性用来设置一个元素是水平还是垂直布局其内容。


```css
/\* Keyword values \*/
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/\* Global values \*/
box-orient: inherit;
box-orient: initial;
box-orient: unset;
```

语法
--

`box-orient` 属性值需指定为以下关键字之一。

### 值

`horizontal`

盒子水平布局其内容。

`vertical`

盒子垂直布局其内容。

`inline-axis` (HTML)

盒子沿内联轴展示其子元素。

`block-axis` (HTML)

盒子沿块轴展示其子元素。

内联轴和块轴取决于写入模式的关键字，在英语中，分别对应水平和垂直方向。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `inline-axis` (`horizontal` in XUL) |
| 适用元素 | elements with a CSS `display` value of `box` or `inline-box` |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----

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

### 设置盒子水平布局

在这里，box-orient 属性会将两个 `<p>` 段落布局到同一行。

#### HTML


```html
<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>
```


#### CSS


```css
div.example {
  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/
  display: box; /\* As specified \*/

  /\* Children should be oriented vertically \*/
  -moz-box-orient: horizontal; /\* Mozilla \*/
  -webkit-box-orient: horizontal; /\* WebKit \*/
  box-orient: horizontal; /\* As specified \*/
}
```


#### 结果

规范
--

不是任何标准的一部分。

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

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

参见
--

* `box-direction` (en-US)
* `box-pack` (en-US)
* `box-align` (en-US)
* `flex-direction`
inset-block-start
=================

CSS 属性 **`inset-block-start`** 定义了元素的块首偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `top`、`right`、`bottom` 或 `left` 属性。

尝试一下
----

语法
--


```css
/\* 长度值 \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* 包含块的宽度或高度的百分比 \*/
inset-block-start: 10%;

/\* 关键词值 \*/
inset-block-start: auto;

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

### 取值

`inset-block-start` 属性的取值与 `left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-height 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-block-start =   
  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-lr;
  position: relative;
  inset-block-start: 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-end`、`inset-inline-start` 和 `inset-inline-end`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`
:visited
========

**`:visited`** CSS 伪类会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限。`:visited` 伪类仅适用于带有 `href` 属性的 `<a>` 和 `<area>` 元素。

尝试一下
----

由 `:visited` 和未访问的 `:link` 伪类定义的样式可以被任何后续的用户动作伪类（`:hover` 或 `:active`）覆盖，只要它们的特殊性至少相等。为了适当地样式化链接，将 `:visited` 规则放置在 `:link` 规则之后但在 `:hover` 和 `:active` 规则之前，按照 *LVHA 顺序定义*：`link` — `:visited` — `:hover` — `:active`。`:visited` 伪类和 `:link` 伪类是互斥的。

隐私限制
----

出于隐私原因，浏览器严格限制你可以让此伪类应用的样式，以及使用它们的方式：

* 允许使用的 CSS 属性有 `color`、`background-color`、`border-color`、`border-bottom-color`、`border-left-color`、`border-right-color`、`border-top-color`、`column-rule-color`、`outline-color`、`text-decoration-color` 和 `text-emphasis-color` (en-US)。
* 允许使用的 SVG 属性有 `fill` 和 `stroke`。
* 允许使用的样式的 alpha 分量（透明度）将被忽略。设置在 `:visited` 中的样式将使用元素的非 `:visited` 访问状态的 alpha 分量。在 Firefox 中，当 alpha 分量为 `0` 时，`:visited` 中设置的样式将被完全忽略。
* 虽然这些样式可以改变用户最终的颜色外观，但 `window.getComputedStyle` 方法将存在并且始终返回非访问颜色的值。
* `<link>` 元素永远不会被 `:visited` 匹配。

**备注：** 有关这些限制及其背后原因的更多信息，请参阅隐私和 :visited 选择器。

语法
--


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

示例
--

未设置颜色或透明的属性不能使用 `:visited`。在可以使用此伪类设置的属性中，浏览器可能只有 `color` 和 `column-rule-color` 两个默认值。因此，对于其他属性，在使用 `:visited` 选择器前，应该先为这些属性设置基础样式。

### HTML


```html
<a href="#test-visited-link">你是否访问过此链接？</a>
<a href="">你已经访问过此链接。</a>
```

### CSS


```css
a {
  /\* 为某些属性指定非透明的默认值，使它们可以与 :visited 状态一起使用样式。 \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

参见
--

* 隐私和 :visited 选择器
* 链接相关伪类：`:link`、`:active` 和 `:hover`
:not()
======

**`:not()`** CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为*反选伪类*（*negation pseudo-class*）。

尝试一下
----

`:not()` 伪类有许多怪异、技巧和意料之外的结果，你在使用它之前应该意识到这些。

语法
--

`:not()` 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择器或伪元素。


```css
:not(<complex-selector-list>) {
  /\* ... \*/
}
```

描述
--

使用 `:not()` 时，有几种不寻常的效果和结果需要注意：

* 可以使用此伪类编写无用的选择器。例如，`:not(*)` 匹配任何不是元素的元素，这显然是荒谬的，所以这个附加的规则将永远不被应用。
* 可以利用这个伪类提高规则的优先级。例如，`#foo:not(#bar)` 和 `#foo` 都将匹配相同的元素，但是具有两个 `id` 的选择器具有更高的优先级。
* `:not()` 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；提供与 `:not(:is(argument))` 相同的优先级。
* `:not(.foo)` 将匹配任何非 `.foo` 的元素，*包括 `<html>` 和 `<body>`*。
* 这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用，这可能令人惊讶，因为有多种路径可以选择一个目标元素。例如，`body :not(table) a` 仍将应用 `<table>` 中的链接，因为 `<tr>`、`<tbody>`、`<th>`、`<td>` (en-US)、`<caption>` 等都可以匹配选择器 `:not(table)` 部分。
* 你可以同时否定多个选择器。例如：`:not(.foo, .bar)` 等同于 `:not(.foo):not(.bar)`。
* 如果传递给 `:not()` 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用：`:is` 伪类，它接受一个可容错选择器列表。例如 `:not(.foo, :invalid-pseudo-class)` 将使整个规则无效，但是 `:not(:is(.foo, :invalid-pseudo-class))` 将匹配任何（*包括 `<html>` 和 `<body>`*）不是 `.foo` 的元素。
示例
--

### 设置 :not() 基础示例

#### HTML


```html
<p>我是一个段落。</p>
<p class="fancy">我非常非常喜欢！</p>
<div>我不是一个段落。</div>
<h2>
  <span class="foo">foo 在 h2 里面</span>
  <span class="bar">bar 在 h2 里面</span>
</h2>
```


#### CSS


```css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* 类名不是 `.fancy` 的 <p> 元素\*/
p:not(.fancy) {
  color: green;
}

/\* 非 <p> 元素 \*/
body :not(p) {
  text-decoration: underline;
}

/\* 既不是 <div> 也不是 <span> 的元素 \*/
body :not(div):not(span) {
  font-weight: bold;
}

/\* 不是 <div> 或 `.fancy` 的元素\*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/\* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 \*/
h2 :not(span.foo) {
  color: red;
}
```

### 结果

### 在 :not 中使用无效选择器

该示例演示了如何在 `:not()` 中使用无效选择器以及如何避免使整个规则无效。

#### HTML


```html
<p class="foo">我是一个带有 .foo 的段落。</p>
<p class="bar">我是一个带有 .bar 的段落。</p>
<div>我是一个没有类的 div 元素。</div>
<div class="foo">我是一个带有 .foo 类的 div 元素。</div>
<div class="bar">我是一个带有 .bar 类的 div 元素。</div>
<div class="foo bar">我是一个带有 .foo 和 .bar 类的 div 元素。</div>
```


#### CSS


```css
/\* 无效的规则，不会产生任何效果 \*/
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/\* 选择所有的没有 .foo 类的 <p> 元素 \*/
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/\* 选择所有没有 .foo 类或者 .bar 类的 <div> 元素 \*/
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/\* 选择所有没有 .foo 或 .bar 类的 <div> 元素。 \*/
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}
```


#### 结果

`p:not(.foo, :invalid-pseudo-class)` 规则是无效的，因为它包含了一个无效选择器。`:is()` 伪类接受容错的选择器列表，因此 `:is(.foo, :invalid-pseudo-class)` 规则是有效的并等同于 `:is(.foo)`。因此，`p:not(:is(.foo, :invalid-pseudo-class))` 规则是有效的，并等同于 `p:not(.foo)`。

如果 `:invalid-pseudo-class` 是一个有效的选择器，则前两个规则仍然是等效的（最后两个规则展示了这一点）。使用 `:is()` 使规则更加健壮。

规范
--

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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

参见
--

* 伪类
* 伪类和伪元素
* 其他功能性 CSS 伪类包括：
    + `:has()`
    + `:is()`
    + `:where()`
<number>
========

语法
--

`<number>` CSS 数据类型代表一个数字，可为整数或小数。它的语法扩展了 `<integer>` 的数据值。要表示一个小数则加上小数部分——“."后跟一或多为十进制数字——到任何 `<integer>` 数据值。像 `<integer>` 数据类型一样，<number> 没有任何单位，并不是一个 CSS 尺寸。

插值
--

`<number>` CSS 数据类型的值可以被插值，用于动画。这种情况下，它们的插值是浮点实数。插值的速度取决于动画的 timing function (en-US)。

示例
--

合法值示例：
```

12          A raw <integer> is also a <number>
4.01        正非整 <数字>
-456.8      负非整 <数字>
0.0         零
+0.0        带正号的零
-0.0        带负号的零 (尽管奇怪，但合法)
.60         点前的数字可以省略
10e3        科学计数法
-3.4e-2     科学计数法最复杂的情况
```


非法值示例：
```

12.         点后需有数字
+-12.2      只能有一个符号
12.1.1      只能有一个点
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

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

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

参见
--

* CSS Reference index
:required
=========

**`:required`** CSS 伪类表示任何设置了 `required` 属性的 `<input>`、`<select>` 或 `<textarea>` 元素。

尝试一下
----

这个伪类很有用，可以突出显示在提交表单之前必须具有有效数据的字段。

**备注：** `:optional` 伪类选择*可选*表单字段。

语法
--


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

示例
--

### 必填字段具有红色边框

#### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```


#### CSS


```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```


#### 结果

无障碍考虑
-----

必填的 `<input>` 应该应用 required 属性。这将确保使用辅助技术（例如屏幕阅读器）导航的人能够了解哪些输入需要有效内容以确保成功提交。

如果表单还包含可选输入，则不应仅仅依赖于颜色这一种传达意义的方式在视觉上指示必填输入。通常还应使用描述性文本和/或图标。

* MDN 理解 WCAG，指南 3.3 解释 (en-US)
* 了解成功标准 3.3.2 | W3C 理解 WCAG 2.0
规范
--

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

参见
--

* 其他与验证相关的伪类：`:optional`、`:invalid` 和 `:valid`
* 表单数据校验
border-top-color
================

**`border-top-color`** 属性用以设置某元素顶部 `border`的颜色。通常，用`border-color` 或 `border-top` 设置该颜色更为便捷可取。

尝试一下
----

语法
--


```css
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

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


`border-top-color` 属性的值为单值。

### 值

`<color>`

上边框的颜色。

### 形式语法
```

border-top-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 一个简单的带边框容器

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

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

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

参见
--

* The border-related CSS shorthand properties: `border`, `border-top`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-top-style` and `border-top-width`.
scroll-padding
==============

简写属性 **`scroll-padding`** 同时设置元素的所有滚动内边距，其赋值方式较为类似 `padding` 属性为元素内边距赋值的方式。

尝试一下
----

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

属性构成
----

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

* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
语法
--


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

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

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

### 取值

`<length-percentage>`

滚动口对应边的内边距，为有效的长度（`<length>`）或百分比（`<percentage>`）。

`auto`

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

形式定义
----

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

形式语法
----
```

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

规范
--

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

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
scroll-padding-inline-start
===========================

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

尝试一下
----

语法
--


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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-inline-start =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
@charset
========

概述
--

**`@charset`** CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 **`@charset`** @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 `<style>` 元素内的样式属性内使用。

此 @规则在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 `content`。

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1. 文件的开头的 Unicode byte-order 字符值。
2. 由 Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
3. `CSS` @规则 `@charset`。
4. 使用参考文档定义的字符编码：`<link>` 元素的 charset 属性。该方法在 HTML5 标准中已废除，无法使用。
5. 假设文档是 UTF-8。
语法
--


```css
@charset "UTF-8";
@charset "iso-8859-15";
```

### 语法格式


```css
@charset "<charset>";
```


*charset*

它是一个 `<string>` 表示字符编码被使用。它必须是在被 IANA-registry 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 *preferred* 的那个才会被使用。

例子
--


```css
@charset "UTF-8";
@charset "utf-8"; /\*大小写不敏感\*/
/\* 设置 css 的编码格式为 Unicode UTF-8 \*/
```



```css
@charset 'iso-8859-15'; /\* 无效的，使用了错误的引号 \*/
@charset "UTF-8"; /\* 无效的，多于一个空格 \*/
 @charset "UTF-8"; /\* 无效的，在 at-rule 之前多了一个空格 \*/
@charset UTF-8; /\* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS <string> \*/
```

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

参见
--

* 字符集术语条目
* Unicode 术语条目
通配选择器
=====

概述
--

在 CSS 中，一个星号 (`*`) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，`*.warning` 和`.warning` 的效果完全相同。

在 CSS3 中，星号 (`*`) 可以和命名空间组合使用：

* `ns|*` - 会匹配`ns`命名空间下的所有元素
* `*|*` - 会匹配所有命名空间下的所有元素
* `|*` - 会匹配所有没有命名空间的元素
示例
--


```css
\*[lang^="en"] {
  color: green;
}
\*.warning {
  color: red;
}
\*#maincontent {
  border: 1px solid blue;
}
```


上面的 CSS 作用于下面的 HTML:


```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```


则会产生这样的效果：

**备注：** 笔者不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器.

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

相关链接
----
list-style-image
================

概要
--

**`list-style-image`** 属性用来指定一个能用来作为列表元素标记的图片。

通常来说使用`list-style`较为方便。

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | list items |
| 是否是继承属性 | yes |
| 计算值 | The keyword `none` or the computed <image> |
| Animation type | discrete |

语法
--


```css
/\* Keyword values \*/
list-style-image: none;

/\* <url> values \*/
list-style-image: url("starsolid.gif");

/\* Global values \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
```

### 值

`<url>`

用来作为标记的图片的地址。

`none`

说明没有图片被用作标记。如果这个值被设定，那么 `list-style-type` 中定义的值会被取代。

### 形式语法
```

list-style-image =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

示例
--

### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

### CSS


```css
ul {
  list-style-image: url("starsolid.gif");
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

参见
--

* `list-style`, `list-style-type`, `list-style-position`
scroll-margin-block
===================

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

尝试一下
----

属性构成
----

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

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


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

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

### 取值

`<length>`

滚动容器对应边的外边距。

描述
--

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `scroll-margin-block-start`: as specified
* `scroll-margin-block-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin-block =   
  <length>{1,2}    
  
```

规范
--

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

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动