CSS 参考
======

使用此 **CSS 参考**页面以浏览按字母索引的所有标准 CSS 属性、伪类、伪元素、数据类型、功能表记以及@ 规则。你也可以浏览CSS 关键概念和按类型排列的 CSS 选择器列表。还有一份简短的 DOM-CSS / CSSOM 参考。

基本规则语法
------

### 样式规则语法


```css
style-rule ::=
 selectors-list {
      properties-list
    }
```


其中：


```css
selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```


参阅后面的*选择器*、*伪元素*、*伪类*列表。每个指定*值*的语法取决于为每个指定*属性*定义的数据类型。

#### 样式规则示例


```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


有关 CSS 选择器语法的初学者介绍，请参阅 CSS 选择器教程。注意，规则定义中的任何 CSS 语法错误都将使整个规则无效，无效的规则将被浏览器忽略。注意 CSS 定义完全是基于（ASCII）文本的，而 DOM-CSS / CSSOM（规则管理系统）是基于对象的。

### @规则语法

由于 @规则间的结构变化很大，请参阅 @规则以找到你所想要的特定规则语法。

索引
--

**备注：** 此索引中的属性名称**不包括**与 CSS 标准名称不同的 JavaScript 名称。

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color`
* `acos()`
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks` (en-US)
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)` (en-US)
* `asin()`
* `aspect-ratio`
* `atan()`
* `atan2()`
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before` (en-US)
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `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`
* `conic-gradient()` (en-US)
* `contain`
* `contain-intrinsic-block-size`
* `contain-intrinsic-height`
* `contain-intrinsic-inline-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility`
* `contrast()`
* `cos()`
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue`
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)` (en-US)
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>` (en-US)
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>` (en-US)
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()`
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)` (en-US)
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing` (en-US)
* `font-palette`
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)` (en-US)
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()`
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row`
* `grid-row-end` (en-US)
* `grid-row-start` (en-US)
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()`

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()` (en-US)
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks` (en-US)

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height`
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link` (en-US)
* `log()`

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US)
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset` (en-US)
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source` (en-US)
* `mask-border-width`
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image`
* `mask-mode`
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat`
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size` (en-US)
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans` (en-US)
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin` (en-US)
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after`
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order`
* `::part`
* `:past` (en-US)
* `path()` (en-US)
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self` (en-US)
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()`
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()`
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert` (en-US)
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()` (en-US)
* `row-gap`
* `ruby-align` (en-US)
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale`
* `scale()`
* `scale3d()` (en-US)
* `scaleX()`
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope`
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()` (en-US)
* `<shape>` (en-US)
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()` (en-US)
* `sin()`
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()`
* `src (@font-face)`
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)` (en-US)
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)`
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()`
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last`
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>`
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)` (en-US)
* `unset`
* `<url>`
* `url()`
* `:user-invalid` (en-US)
* `user-select`
* `:user-valid` (en-US)

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

选择器
---

以下是一些选择器的列表，它们允许根据 DOM 内元素的各种特征对样式进行条件限制。

### 基本选择器

基本选择器是选择器中最初级的，通常由它们的组合构成其他更复杂的选择器。

* 通配选择器 `*`
* 元素选择器 `elementname`（元素名称）
* 类选择器 `.classname`（类名）
* ID 选择器 `#idname`（ID 名）
* 属性选择器 `[attr=value]`（属性=值）
### 分组选择器

选择器列表 `A, B`

指定同时选择 `A` 和 `B` 元素。这是一种选择多个匹配元素的分组方法。

### 组合选择器

组合选择器是在两个或多个简单选择器之间建立关系的选择器，例如“`A` 是 `B` 的子代”或“`A` 与 `B` 相邻”，它们构成了比较复杂的选择器。

接续兄弟选择器 `A + B`

指定 `A` 和 `B` 选择的元素具有相同的父元素，并且 `B` 选择的元素在水平方向上紧随 `A` 选择的元素。

后续兄弟选择器 `A ~ B`

指定由 `A` 和 `B` 选择的元素共享相同的父元素，并指定 `A` 选择的元素在 `B` 选择的元素之前（但不一定紧接在 `B` 之前）。

子选择器 `A > B`

指定 `B` 选择的元素是 `A` 选择的元素的直接子元素。

后代选择器 `A B`

指定 `B` 选择的元素是 `A` 选择的元素的后代，但不一定是直接子代。

列选择器 `A || B` 
实验性

指定 `B` 选择的元素在 `A` 指定的表格列中，跨越多列的元素被认为是所有这些列的成员。

### 伪类

伪类 `:`

指定了所选择元素特定的状态。

伪元素 `::`

代表不包含在 HTML 中的实体。


参见标准 4 定义的选择器列表。

概念
--

### 语法和语义

* CSS 语法
* @ 规则
* 层叠
* 注释
* 解释器
* 继承
* 简写属性
* 优先级
* 值定义语法
* CSS 单位与取值类型
* CSS 函数表记
### 值

* 实际值
* 计算值
* 初始值
* 解析值
* 指定值
* 使用值
### 布局

* 块级格式化上下文
* 盒模型
* 包含块
* 布局模式
* 外边距合并
* 替换元素
* 层叠上下文
* 视觉格式化模型
DOM-CSS / CSSOM
---------------

### 主要对象类型

* `DocumentOrShadowRoot.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` （选择器 & 样式）
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText (en-US)`（仅样式）
* `Element.className`
* `Element.classList`
### 重要方法

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
参见
--

* Mozilla CSS 扩展 (en-US)（以 `-moz` 前缀）
* WebKit CSS 扩展（大多数时候以 `-webkit` 前缀）
* Microsoft CSS 扩展（以 `-ms` 前缀）
外部链接
----

* CSS 索引（w3.org）