recursal/MDN huggingface dataset:
:disabled
=========

`:disabled` CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。

尝试一下
----

语法
--


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

示例
--

这个例子展示了一个基本的发货表单。通过使用 JavaScript `change` 事件让用户启用/禁用账单字段。

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>发货地址</legend>
    <input type="text" placeholder="姓名" />
    <input type="text" placeholder="地址" />
    <input type="text" placeholder="邮政编码" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>账单地址</legend>
    <label for="billing-checkbox">跟发货地址一样：</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="姓名" disabled />
    <input type="text" placeholder="地址" disabled />
    <input type="text" placeholder="邮政编码" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// 等待页面加载完毕
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // 将“change”事件监听器附加到复选框
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 选择 billing 文本字段
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 切换 billing 文本字段
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

参见
--

* `:enabled`
:host
=====

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`** CSS 伪类选择内部使用了该 CSS 的影子 DOM（shadow DOM） 的影子宿主（shadow host）——换句话说，这允许你从其影子 DOM 内部选择自定义元素。

**备注：** 这不适用于在影子 DOM 之外使用。


```css
/\* 选择影子根宿主 \*/
:host {
  font-weight: bold;
}
```

语法
--


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

示例
--

### 给影子宿主添加样式

下面的片段摘自我们的 host-selectors 示例（也可以在线查看）。

在此示例中，我们有一个简单的自定义元素（`<context-span>`）你可以将其包装在文本周围：


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


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


```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 { background: rgba(0,0,0,0.1); padding: 2px 5px; }` 规则为文档中 `<context-span>` 元素（在文档中为影子宿主）的所有实例设置样式。

规范
--

| 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-context()`
counter-set
===========

**`counter-set`** CSS 属性将 CSS 计数器设置为给定值。它会操作现有计数器的值，并且只有在元素上没有给定名称的计数器时才会创建新计数器。

尝试一下
----

**备注：** 计数器的值可以通过 `counter-increment` CSS 属性进行递增或递减。

语法
--


```css
/\* 将 "my-counter" 设置为 0 \*/
counter-set: my-counter;

/\* 将 "my-counter" 设置为 -1 \*/
counter-set: my-counter -1;

/\* 将 "counter1" 设置为 1，将 "counter2" 设置为 4 \*/
counter-set: counter1 1 counter2 4;

/\* 取消在不太具体的规则中可能设置的任何计数器 \*/
counter-set: none;

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


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

* 一个命名计数器的 `<custom-ident>`，后面可跟一个 `<integer>`。你可以指定要重置的计数器数量，每个名称或名称—数字对之间用空格分隔。
* 关键字值 `none`。
### 值

`<custom-ident>`

要设置的计数器的名称。

`<integer>`

在元素每次出现时设置计数器的值。如果未指定，则默认为 `0`。如果当前元素上没有给定名称的计数器，元素将创建一个给定名称的新计数器，起始值为 0（尽管它可能会立即将该值设置或增加为不同的值）。

`none`

不执行计数器设置。这可以用来覆盖在较不具体的规则中定义的 `counter-set`。

形式定义
----

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

形式语法
----
```

counter-set =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

示例
--

### 设置命名计数器


```css
h1 {
  counter-set: chapter section 1 page;
  /\* 将章节和页面计数器设置为 0，
 将部分计数器设置为 1 \*/
}
```

规范
--

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

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

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

参见
--

* 使用 CSS 计数器
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` 和 `counters()` 函数
* `content` 属性
padding-bottom
==============

CSS 属性 **padding-bottom** 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。

![The effect of the CSS padding-bottom property on the element box](/files/4109/padding-bottom.svg)


```css
/\* <length> values \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> value \*/
padding-bottom: 10%;

/\* Global values \*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;
```


|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------

### Values

`<length>`

当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。

`<percentage>`

当内边距（padding）是一个百分比的时候，百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。

### Formal syntax
```

padding-bottom =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------
```

.content { padding-bottom: 5%; }
.sidebox { padding-bottom: 10px; }
```

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

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

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

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

See also
--------

* CSS Box Model
* The `padding` shorthand property can be used to set paddings on all four sides of an element with a single declaration: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
::slotted()
===========

**`:slotted()`** CSS 伪元素用于选定那些被放在 HTML 模板中的元素（更多请查看使用模板和插槽）。

这个伪类选择器仅仅适用于影子节点树（Shadow Dom）。并且只会选择实际的元素节点，而不包括文本节点。


```css
/\* Selects any element placed inside a slot \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Selects any <span> placed inside a slot \*/
::slotted(span) {
  font-weight: bold;
}
```

语法
--

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

下面的小片段是关于 插槽伪类元素 小 demo (点击查看实例).

在这个小 demo 中，我们使用一个带有 3 个插槽的 HTML 模板：


```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```


自定义元素 `<person-details>` 的定义如下：


```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

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

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```


为了更好地区分**未被成功填充的插槽**和**成功填充的插槽**, 我们在 CSS 中选择了所有的插槽元素 (`::slotted(*)`), 并填充了不一样的颜色和字体。结果也是如此。

元素就像如下被填充了起来：


```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>
```

规范
--

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

参考
--

* Web components
shape-margin
============

CSS 属性 **`shape-margin`** 用于设定由`shape-outside`创建的 CSS 形状的外边距。

尝试一下
----

这个外边距可以让你调整（浮动元素的）形状边缘与环绕内容之间的距离。

语法
--


```css
/\* <length> values \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> value \*/
shape-margin: 60%;

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

### 值

`<length-percentage>`

使用`<length>`值，或者相对于元素容纳块的`<percentage>`值来设定形状的外边距。

### 正式语法
```

shape-margin =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

范例
--

### Adding a margin to a polygon

#### HTML


```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```


#### CSS


```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```


#### Result

规范
--

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | floats |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* CSS Shapes
* Overview of CSS Shapes
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`
border-right-style
==================

**`border-right-style`** 是 border 中的一个 CSS 子属性，描述的是右边框的样式 `border`.

尝试一下
----

**备注：** 这个 css 没有定义不同样式的边界之间如何拼接。

Syntax
------


```css
/\* 可用的值 \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/\* 全局可用的值 \*/
border-right-style: inherit;
border-right-style: initial;
border-right-style: unset;
```


The `border-right-style` property is specified as a single keyword chosen from those available for the `border-style` property.

### 语法格式
```

border-right-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--

#### 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-right-style example classes \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```


#### 结果

规范
--

| 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 |

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

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

参考
--

* 其他样式相关边框属性：`border-bottom-style`, `border-left-style`, `border-top-style`, and `border-style`.
* 其他 bottom-border-related 属性：`border-right`, `border-right-color`, and `border-right-width`.
font-smooth
===========

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

**`font-smooth`** CSS 属性控制字体渲染时应用的抗锯齿效果。

语法
--


```css
/\* 关键字值 \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> 值 \*/
font-smooth: 2em;

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


**备注：** Webkit 实现了名为 **`-webkit-font-smoothing`** 的相似属性。该属性仅适用于 macOS。

* `auto`——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
* `none`——关闭字体平滑；显示带有锯齿边缘的文本。
* `antialiased`——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
* `subpixel-antialiased`——在大多数非视网膜显示器上，这将会提供最清晰的文本。

**备注：** Firefox 实现了名为 **`-moz-osx-font-smoothing`** 的相似属性。该属性仅适用于 macOS。

* `auto`——允许浏览器选择字体平滑的优化方式，通常为 `grayscale`。
* `grayscale`——用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。

形式定义
----

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

形式语法
----
```

font-smooth =
  auto | never | always | <absolute-size> | <length>
```

示例
--

### 基础使用示例

以下示例展示了在 macOS 上打开字体平滑的 Safari/Chromium 和 Firefox 的等效结果。对于这两类情况，平滑的字体应该看起来更细一些。

对于那些没有使用 macOS 系统的用户，这里有一张截图（后面会有实时版本）：

![两类文本示例，一个具有 font-smooth 属性，而另一个则不具有](/zh-CN/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML


```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```


#### CSS


```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```


#### 结果

规范
--

不属于任何规范。

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

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

参见
--

* 请停止“修复”字体平滑——UsabilityPost
* 不干涉字体平滑和抗锯齿
:picture-in-picture
===================

**`:picture-in-picture`** CSS 伪类匹配当前处于画中画模式的元素。

语法
--


```css
:picture-in-picture {
  /\* ... \*/
}
```

用法说明
----

`:picture-in-picture` 伪类允许你配置样式表，以便视频在画中画或者传统播放模式来回切换时自动调整内容的大小、样式或布局。

示例
--

在此示例中，当视频在浮动窗口显示时，会有盒状阴影。

### HTML

页面的 HTML 如下所示：


```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```


ID 为 `"pip-video"` 的 `<video>` 会根据是否在画中画浮动窗口中而在是否带有一个红色的阴影之间变换。

### CSS

这一效果发生在 CSS 中。


```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

参见
--

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
初始值
===

CSS属性的**初始值**是其默认值，如其定义表中所列。初始值的使用取决于属性是否被继承：

* 对于继承属性，初始值只能被用于没有指定值的**根元素**上。
* 对于非继承属性，初始值可以被用于**任意**没有指定值的元素上。

**备注：** 你可以使用 `initial` (en-US) 关键词明确指定初始值。

规范
--

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

参见
--

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

**`:invalid`** 是 CSS 伪类选择器，用来选择任何未通过验证的 `<form>`、`<fieldset>`、`<input>` 或其他表单元素。

尝试一下
----

该伪类选择器可用于突出显示用户的字段错误。

语法
--


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

示例
--

### 使用颜色标识元素以显示验证结果

#### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">输入一个 URL：</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">输入一个电子邮件地址：</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:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

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

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


#### 结果

### 展示分阶段的表单部分

在这个例子中，我们使用 `:invalid` 以及后续兄弟选择器（`~`）来分阶段地展示一个表单，使得表单最初只显示第一个完成的项目，当用户完成每一个项目时，表单会显示下一个项目。当整个表单完成后，用户可以提交它。

#### HTML


```html
<form>
  <fieldset>
    <label for="form-name">姓名</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">电子邮件</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">信息</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">提交</button>
</form>
```


#### CSS


```css
/\* 在无效的字段集后隐藏该字段集： \*/
fieldset:invalid ~ fieldset {
  display: none;
}

/\* 在表单无效时，将按钮变暗并禁用它： \*/
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}
```


#### 结果

无障碍考虑
-----

红色通常用于表示输入无效。某些色盲患者将无法确定输入的状态，除非有不依赖颜色传达意义的附加指示器。通常使用描述性文字和（或）图标。

* MDN 理解 WCAG，指南 1.4 的解释 (en-US)
* 理解成功标准 1.4.1 | W3C 理解 WCAG 2.0
注意
--

### 单选按钮

如果一组单选按钮中的任何一个是 `reuqire`，并且未选择该组中的任何按钮，则应用 `:invalid` 伪类到所有按钮上（分组的单选按钮共享 `name` 属性的相同值）。

### Gecko 默认设置

默认情况下，Gecko 不对 `:invalid` 伪类应用样式。但是，对于 `:invalid` 的某些子集情况，它会应用样式（使用 `box-shadow` 属性显示红色“发光”）。此时，应用的是 `:user-invalid` (en-US) 伪类。

规范
--

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

参见
--

* 其他验证相关的伪类：`:required`、`:optional`、`:valid`
* 相关的 Mozilla 伪类：`:user-invalid` (en-US)、`:-moz-submit-invalid` (en-US)
* 表单数据验证 (en-US)
* 从 JavaScript 中访问有效性状态
scroll-padding-block-end
========================

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

尝试一下
----

语法
--


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

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

/\* 全局值 \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: 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-block-end =   
  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 滚动吸附明确控制滚动
-webkit-mask-attachment
=======================

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

如果使用了 `-webkit-mask-image` (en-US), `-webkit-mask-attachment` 将指定蒙版在视口的位置是固定的，还是同包含块一起滚动的。


```css
/\* 关键字 \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* 多个值 \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/\* 全局值 \*/
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;
```


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

语法
--

### 可用的值

scroll

使用 `scroll` 时，蒙版在视口中同包含它的块一起滚动。

fixed

使用 `fixed` 时，蒙版不会同包含它的元素一起滚动，而是在视口中固定不动。

### 使用语法

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


```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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

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

另见
--

`-webkit-mask` (en-US), `-webkit-mask-clip` (en-US), `-webkit-mask-box-image` (en-US), `-webkit-mask-origin` (en-US), `-webkit-mask-image` (en-US), `-webkit-mask-composite` (en-US), `-webkit-mask-repeat` (en-US)
子组合器
====

**子组合器**（`>`）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。


```css
/\* 选择属于“my-things”类的无序列表（ul）的直接子列表元素（li） \*/
ul.my-things > li {
  margin: 2em;
}
```


被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素。这比后代组合器更严格，后者匹配所有被第二个选择器匹配的元素，这些元素存在被第一个选择器匹配的祖先元素，无论在 DOM 上有多少“跳”。

语法
--


```css
元素 1 > 元素 2 { 样式声明 }
```

示例
--

### CSS


```css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}
```

### HTML


```html
<div>
  <span>
    1 号 span，在 div 中。
    <span>2 号 span，在 div 中的 span 中。</span>
  </span>
</div>
<span>3 号 span，不在 div 中。</span>
```

### 运行结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

参见
--

* 后代组合器