recursal/MDN huggingface dataset:
background-repeat
=================

**`background-repeat`** CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

尝试一下
----

默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 `round`) 或者均匀地分布 (使用 `space`).

语法
--


```css
/\* 单值语法 \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* 双值语法：水平 horizontal | 垂直 vertical \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;
```

### 值

`<repeat-style>`

单值语法是完整的双值语法的简写：

| **单值** | **等价于双值** |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明：

| 值 | 描述 |
| --- | --- |
| `repeat` | 图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话。 |
| `space` | 图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。`background-position`属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像。 |
| `round` | 随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是 260px, 重复三次之后，可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展。 |
| `no-repeat` | 图像不会被重复 (因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由`background-position`属性来决定。 |

### 标准语法
```

background-repeat =   
  <repeat-style>#    
  
<repeat-style> =   
  repeat-x                                     |  
  repeat-y                                     |  
  [ repeat | space | round | no-repeat ]{1,2}    
  
```

例子
--

### HTML


```html
<ol>
  <li>
    no-repeat
    <div class="one">&nbsp;</div>
  </li>
  <li>
    repeat
    <div class="two">&nbsp;</div>
  </li>
  <li>
    repeat-x
    <div class="three">&nbsp;</div>
  </li>
  <li>
    repeat-y
    <div class="four">&nbsp;</div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="five">&nbsp;</div>
  </li>
</ol>
```

### CSS


```css
/\* Shared for all DIVS in example \*/
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 144px;
  height: 84px;
}

/\* 因为 space 和 round 当前没有被广泛支持的，所以没有添加\*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}

/\* Multiple images \*/
.five {
  background-image: url(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

### 结果

在这个例子中，每一个列表项都使用了不同的`background-repeat` 语法。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-repeat |

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

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

**`quotes`** CSS 属性用于设置引号的样式。

尝试一下
----

语法
--


```css
/\* Keyword value \*/
quotes: none;

/\* <string> values \*/
quotes: "«" "»"; /\* Set open-quote and close-quote to the French quotation marks \*/
quotes: "«" "»" "‹" "›"; /\* Set two levels of quotation marks \*/

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

### 值

`none`

`content` 属性的值 `open-quote` 和 `close-quote` 将不会展示引号。

`auto`

用适当的引号，基于在所选元素上设置的任何语言值（例如，通过 `lang` 属性）。

`[<string> <string>]+`

一组或者多组 `<string>` 的值对应 `open-quote` and `close-quote`. 第一对表示引号的外层，第二对表示第一个嵌套层，下一对表示第三层，依此类推。

### 形式语法
```

quotes =   
  auto                    |  
  none                    |  
  [ <string> <string> ]+    
  
```

示例
--

### 基本用法

#### HTML


```html
<q>To be or not to be. That's the question!</q>
```


#### CSS


```css
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
```


#### 结果

### 自动选择引号

#### HTML


```html
<div lang="fr">
  <q>Ceci est une citation française.</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```


#### CSS


```css
/\*q {
 quotes: auto;
}\*/
```


#### 结果

备注
--

* 对于大多数浏览器，引号的默认值始终为 auto（Firefox 70+），否则浏览器具有此默认行为（Chromiums，Safari，Edge），因此上面的示例可以在不显式设置的情况下工作。
* 从 Firefox 3.5 开始，可以使用 `-moz-initial`读取 quotes 属性的初始值，这在 Firefox 的早期版本中是不可能的。
规范
--

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

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

参见
--

* `content`
border-inline-start-width
=========================

CSS 属性 **`border-inline-start-width`** 定义了元素的逻辑行首的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-width`、`border-right-width`、`border-bottom-width` 或 `border-left-width` 属性。

尝试一下
----

语法
--


```css
/\* 边框宽度值 \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;

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


与此相关的属性有 `border-block-start-width`、`border-block-end-width` 和 `border-inline-end-width`，这些属性定义了元素其他边框的宽度。

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

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

示例
--

### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width`
* `writing-mode`、`direction`、`text-orientation`
text-decoration-style
=====================

CSS 属性 **`text-decoration-style`** 用于设置由 `text-decoration-line` 设定的线的样式。线的样式会应用到所有被 `text-decoration-line` 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。

尝试一下
----

如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如 `<del>` 或 `
` 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。

当一次使用多个 line-decoration 属性时，使用 `text-decoration` 简写属性会更方便。

语法
--


```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

### 值

solid

画一条实线。

double

画一条双实线。

dotted

画一条点划线。

dashed

画一条虚线。

wavy

画一条波浪线。

-moz-none
非标准

不画线。亦可用 `text-decoration-line``: none` 替代。

### 形式语法
```

text-decoration-style =   
  solid   |  
  double  |  
  dotted  |  
  dashed  |  
  wavy      
  
```

示例
--


```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```



```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```



```html
<p class="wavy">This text has a wavy red line beneath it.</p>
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

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

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

参见
--

* 当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便
shape-image-threshold
=====================

CSS 属性 **`shape-image-threshold`** 通过设定一个 alpha 通道的界限值来提取`shape-outside` 值为图像的形状。

尝试一下
----

所有 alpha 值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为`0.5`时，形状会包含所有不透明度超过 50% 的像素。


```css
/\* <number> value \*/
shape-image-threshold: 0.7;

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


|  |  |
| --- | --- |
| 初始值 | `0.0` |
| 适用元素 | floats |
| 是否是继承属性 | 否 |
| 计算值 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | a number |

语法
--

### 值

`<alpha-value>`

设定界限值以从图像中提取形状。形状由所有 alpha 值比界限值大的像素定义。在 0.0（完全透明）到 1.0（完全不透明）之外的值会被重置（译者：如，小于 0.0 的值会被重置成 0.0）。

### 正式语法
```

shape-image-threshold =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

范例
--

### Aligning text to a gradient

这个例子创建了一个`<div>`块，其背景是一个渐变图像。`shape-outside`也定义了一个渐变图像，以此创建一个 CSS 形状，渐变图像中不透明度至少为 20%（即 alpha 值大于 0.2）的像素都是形状的一部分。

#### HTML


```html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>
```


#### CSS


```css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}
```


在这里，形状由`background-image`创建，使用渐变而非图像文件。我们在`shape-outside`属性中使用相同的渐变图像创建形状，以此构建浮动区域。

随后值为`0.2`的`shape-image-threshold`属性规定渐变中不透明度超过 20% 的像素才参与构成形状。

#### Result

规范
--

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-image-threshold-property |

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

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

参见
--

* CSS Shapes
* Overview of CSS Shapes
* `<basic-shape>`
* `shape-outside`
* `shape-margin`
margin-block-start
==================

CSS 属性 **`margin-block-start`** 定义了元素的逻辑块首外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
margin-block-start: 10px; /\* 绝对长度 \*/
margin-block-start: 1em; /\* 相对于文本尺寸 \*/
margin-block-start: 5%; /\* 相对于最近区块容器的宽度 \*/

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

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


根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

与此属性相关的有 `margin-block-end`、`margin-inline-start` 和 `margin-inline-end` 等定义元素的其他外边距的属性。

### 取值

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

形式语法
----
```

margin-block-start =   
  <'margin-top'>    
  
```

示例
--

### 设置块首外边距

#### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`
* `writing-mode`、`direction`、`text-orientation`
::-webkit-slider-runnable-track
===============================

\*\*`::-webkit-slider-runnable-track`\*\*表示其在 type 为 range 的 input 标签内中的滑块凹槽，也就是滑块可滑动的区域

### 使用方法

input[type=range]**`::-webkit-slider-runnable-track`**`{`border-radius: 10px; //为凹槽添加圆角边 background:#eee;//修改背景色`}`

### 规范

**`::-webkit-slider-runnable-track`** 不是任何规范的一部分。这是 WebKit/Blink 特有的伪元素 (也就是 chrome/safari 浏览器内核特有的)

### 参见

* ::-webkit-slider-thumb
* 与其他浏览器内核功能类似的伪类
    + ::-ms-track
    + ::-moz-range-track
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
::view-transition
=================

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

**`::view-transition`** CSS 伪元素表示视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。

在视图过渡期间，`::view-transition` 包含在相关的伪元素树中，如视图过渡过程中所述。它是该树的顶级节点，并且有一个或多个 `::view-transition-group` 子节点。

`::view-transition` 在 UA 样式表中具有以下默认样式：


```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```


所有 `::view-transition-group` 伪元素都相对于视图过渡根元素定位。

语法
--


```css
::view-transition {
  /\* ... \*/
}
```

示例
--


```css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # selectordef-view-transition |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡
column-rule-color
=================

CSS 特性 `column-rule-color` 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | multicol elements |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

Syntax
------
```

Formal syntax: 
```
column-rule-color =   
  <color>    
  
```


```
```

column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

column-rule-color: inherit;
```

### Values

<color>

Is a `<color>` value representing the color of the rule separating columns.

Example
-------


```css
#header {
  column-rule-color: blue;
}
```

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

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

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

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

CSS 属性 **`border-block-style`** 定义了元素的逻辑块向的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-style` 和 `border-bottom-style`，或者 `border-left-style` 和 `border-right-style` 属性。

尝试一下
----

另一方向的边框线型可用 `border-inline-style` 设置，此属性会设置 `border-inline-start-style` 和 `border-inline-end-style`。

语法
--


```css
/\* 边框线型值 \*/
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

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

### 取值

`<'border-style'>`

边框线型。见 `border-style`。

形式定义
----

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

形式语法
----
```

border-block-style =   
  <'border-top-style'>{1,2}    
  
```

示例
--

### 竖排文本的虚线边框

#### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-style |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-style`、`border-right-style`、`border-bottom-style` 或 `border-left-style`
* `writing-mode`、`direction`、`text-orientation`
::part()
========

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
**`::part`** CSS 伪元素表示在阴影树中任何匹配 `part` 属性的元素。


```css
custom-element::part(foo) {
  /\* 样式作用于 `foo` 部分 \*/
}
```

语法
--

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

### HTML


```html
<template id="tabbed-custom-element">
  <style type="text/css">
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>
```

### CSS


```css
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

### JavaScript


```js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content);
    }
  },
);
```

### 结果

规范
--

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

相关阅读
----

* `part` 属性 - 用于定义可以被 `::part()` 选取的选择器
* `exportparts` 属性 - 用于将阴影部分从嵌套的阴影树过渡到包含显影树的传递导出。
* Explainer: CSS Shadow ::part and ::theme
:where()
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

* Learn more
* See full compatibility
* Report feedback
**`:where()`** CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。


```css
/\* Selects any paragraph inside a header, main
 or footer element that is being hovered \*/
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/\* The above is equivalent to the following \*/
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
```


`:where()` 和 `:is()` 的不同之处在于，`:where()` 的优先级总是为 0，但是 `:is()` 的优先级是由它的选择器列表中优先级最高的选择器决定的。

### 可容错选择器解析

规范将 `:is()` 和 `:where()` 定义为接受一个可容错选择器列表。

在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效。当使用 `:is()` 或 `:where()` 而不是整个选择器列表时，如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。


```css
:is(:valid, :unsupported) {
  /\* … \*/
}
```


即使在不支持 `:unsupported` 的浏览器中，仍将正确解析 `:valid`，而：


```css
:valid,
:unsupported {
  /\* … \*/
}
```


在不支持 `:unsupported` 浏览器中即使它们支持 `:valid`，仍将忽略。

示例
--

### 比较 :where() 和 :is()

该示例展示了 `:where()` 是如何起作用的，并且也阐述了 `:where()` 和 `:is()` 的区别。

跟随以下 HTML：


```html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>
```


在这个有点人为的例子中，我们有两篇文章，每篇文章包含一个段落、一个侧边栏和一个页脚。它们由于使用标记子元素的不同而不同。

为了使选择它们内部的链接更简单，但仍然不同，我们*可以*使用 `:is()` 或 `:where()`，方式如下：


```css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}
```


然而，我们以后想使用一个简单选择器覆盖页脚的链接应该怎么办？


```css
footer a {
  color: blue;
}
```


这个红色的链接不起作用，因为 `:is()` 中的选择器会计入整体选择器的优先级，并且类选择器的优先级高于元素选择器。

然而，`:where()` 中的选择器的优先级是 0，所以橘色的页脚链接将被我们的简单选择器覆盖。

**备注：** 你也可以在 GitHub 上找到这个示例；参见 is-where。

语法
--
```

:where( <complex-selector-list> )
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # zero-matches |

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

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

参见
--

* `:is()`
* 选择器列表
* Web component
right
=====

**`right`** CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。


```css
/\* <length> values \*/
right: 3px;
right: 2.4em;

/\* <percentage>s of the width of the containing block \*/
right: 10%;

/\* Keyword value \*/
right: auto;

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


`right`的效果取决于元素的`position`属性：

* 当 `position` 设置为 `absolute` 或 `fixed` 时，`right` 属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
* 当 `position` 设置为 `relative` 时，`right` 属性指定了元素的右边界离开其正常位置的偏移。
* 当 `position` 设置为 `sticky` 时，如果元素在 viewport 里面，`right` 属性的效果和 position 为 `relative` 等同；如果元素在 viewport 外面，`right` 属性的效果和 position 为 `fixed` 等同。
* 当 `position` 设置为 `static` 时，`right` 属性无效。

当 `left` 和 right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，`left` 的值会被优先设定；当容器是从右到左时，`right` 的值会被优先设定。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

语法
--

### 取值

`<length>`

可以是负的，正的 或者 null `<length>` 表示：

* 对于**绝对定位的元素**，元素右外边距边界与其包含块右边界之间的偏移。
* 对于**相对定位定位的元素**，元素的右边界离开其正常位置的偏移。

`<percentage>`

代表元素包含块的宽度的百分比 `<percentage>`。

`auto`

这个关键字表示：

* 对于绝对定位元素，元素将忽略此属性而以 `left` 属性为准，如果此时设置 `width: auto`，将基于内容需要的宽度设置宽度；如果 `left` 也为 `auto` 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。
* 对于相对定位元素，元素相对正常位置的偏移量将基于 `left` 属性；如果 `left` 也为 `auto` 的话，元素将不会有偏移。

`inherit`

这个关键字表示该值与其父元素（可能不是它的包含块）的计算值相同。对这个计算值的处理将和它原本为 `<length>`、`<percentage>` 或 `auto` 一样。

### 形式语法
```

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

示例
--


```css
#example\_3 {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example\_4 {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
```



```html
<div id="example\_3">Example 3</div>
<div id="example\_4">Example 4</div>
```

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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