CSS Reference

使用此 CSS 参考来浏览所有标准 CSS 属性，伪类，伪元素，数据类型和 at-rules 的字母索引。您还可以浏览按类型组织的所有 CSS 选择器列表以及 CSS 关键概念列表。还包括一个简短的 DOM-CSS / CSSOM 参考。

基本规则语法

样式规则语法

selectorlist {
  property: value;
  [more property:value; pairs]
}

... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]

See selector, pseudo-class, pseudo-element lists below.

样式规则示例

strong {
  color: red;
}

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

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

At-rule 语法

由于规则的结构差异很大，请参阅规则以查找所需的特定语法的语法。

关键字索引

A

• :active
• additive-symbols (@counter-style)
• ::after (:after)
• align-content
• align-items
• align-self
• all
• <an-plus-b>
• <angle>
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• @annotation
• annotation()(font-variant-alternates#annotation(%29)
• attr()

B

• ::backdrop
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• <basic-shape>
• ::before (:before)
• <blend-mode>
• block-size
• blur()(filter#blur(%29)
• border
• 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-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• 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-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-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
• @bottom-left
• @bottom-left-corner
• @bottom-right
• @bottom-right-corner
• box-decoration-break
• box-shadow
• box-sizing
• break-after
• break-before
• break-inside
• brightness()(filter#brightness(%29)

C

• calc()
• caption-side
• caret-color
• ch
• @character-variant
• character-variant()(@font-face/font-variant#character-variant(%29)
• @charset
• :checked
• circle()(basic-shape#circle(%29)
• clear
• clip
• clip-path
• cm
• <color>
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• contrast()(filter#contrast(%29)
• <counter>
• counter-increment
• counter-reset
• @counter-style
• cross-fade()
• cubic-bezier()
• ::cue
• cursor
• <custom-ident>

D

• :default
• deg
• :dir
• direction
• :disabled
• display
• dpcm
• dpi
• dppx
• drop-shadow()(filter#drop-shadow(%29)

E

• element()(element(%29)
• ellipse()(basic-shape#ellipse(%29)
• em
• :empty
• empty-cells
• :enabled
• ex

F

• fallback (@counter-style)
• filter
• :first
• :first-child
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• :first-of-type
• fit-content()
• <flex>
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• :focus
• font
• @font-face
• font-family
• font-family (@font-face)
• font-feature-settings
• font-feature-settings (@font-face)
• @font-feature-values
• font-kerning
• font-language-override
• font-size
• font-size-adjust
• font-stretch
• font-stretch (@font-face)
• font-style
• font-style (@font-face)
• font-synthesis
• font-variant
• font-variant (@font-face)
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-weight
• font-weight (@font-face)
• format()(@font-face/src#format(%29)
• format() (@font-face)(@font-face/format(%29)
• fr
• frames()
• <frequency>
• :fullscreen

G

• grad
• <gradient>
• grayscale()(filter#grayscale(%29)
• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-end
• grid-row-gap
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows

H

• height
• height (@viewport)
• @historical-forms
• :hover
• hsl()(color_value#hsl(%29)
• hsla()(color_value#hsla(%29)
• hue-rotate()(filter#hue-rotate(%29)
• hyphens
• hz

I

• <ident>
• <image>
• image()(image#The_image(%29_functional_notation)
• image-orientation
• image-rendering
• image-resolution
• image-set()
• ime-mode
• @import
• in
• :in-range
• :indeterminate
• inherit
• initial
• inline-size
• inset()(basic-shape#inset(%29)
• <integer>
• :invalid
• invert()(filter#invert(%29)
• isolation

J

• justify-content

K

• @keyframes
• khz

L

• :lang
• :last-child
• :last-of-type
• leader()
• :left
• left
• @left-bottom
• @left-middle
• @left-top
• <length>
• letter-spacing
• line-break
• line-height
• linear-gradient()
• :link
• list-style
• list-style-image
• list-style-position
• list-style-type
• local()(@font-face/src#local(%29)

M

• margin
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• margin-top
• mask
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type
• matrix()(transform-function#matrix(%29)
• matrix3d()(transform-function#matrix3d(%29)
• max-height
• max-height (@viewport)
• max-width
• max-width (@viewport)
• max-zoom (@viewport)
• @media
• min-block-size
• min-height
• min-height (@viewport)
• min-inline-size
• min-width
• min-width (@viewport)
• min-zoom (@viewport)
• minmax()
• mix-blend-mode
• mm
• ms

N

• @namespace
• negative (@counter-style)
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• <number>

O

• object-fit
• object-position
• offset-block-end
• offset-block-start
• offset-inline-end
• offset-inline-start
• :only-child
• :only-of-type
• opacity
• opacity()(filter#opacity(%29)
• :optional
• order
• orientation (@viewport)
• @ornaments
• ornaments()(@font-face/font-variant#ornaments(%29)
• orphans
• :out-of-range
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-wrap
• overflow-x
• overflow-y

P

• pad (@counter-style)
• padding
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• @page
• page-break-after
• page-break-before
• page-break-inside
• pc
• <percentage>
• perspective
• perspective()(transform-function#perspective(%29)
• perspective-origin
• pointer-events
• polygon()(basic-shape#polygon(%29)
• <position>
• position
• prefix (@counter-style)
• pt
• px

Q

• q
• quotes

R

• rad
• radial-gradient()
• range (@counter-style)
• <ratio>
• :read-only
• :read-write
• rect()(shape#rect(%29)
• rem
• repeat()
• repeating-linear-gradient()
• repeating-radial-gradient()
• :required
• resize
• <resolution>
• revert
• rgb()(color_value#rgb(%29)
• rgba()(color_value#rgba(%29)
• :right
• right
• @right-bottom
• @right-middle
• @right-top
• :root
• rotate()(transform-function#rotate(%29)
• rotate3d()(transform-function#rotate3d(%29)
• rotateX()(transform-function#rotateX(%29)
• rotateY()(transform-function#rotateY(%29)
• rotateZ()(transform-function#rotateZ(%29)
• ruby-align
• ruby-merge
• ruby-position

S

• s
• saturate()(filter#saturate(%29)
• scale()(transform-function#scale(%29)
• scale3d()(transform-function#scale3d(%29)
• scaleX()(transform-function#scaleX(%29)
• scaleY()(transform-function#scaleY(%29)
• scaleZ()(transform-function#scaleZ(%29)
• :scope
• scroll-behavior
• scroll-snap-coordinate
• scroll-snap-destination
• scroll-snap-type
• ::selection
• sepia()(filter#sepia(%29)
• <shape>
• shape-image-threshold
• shape-margin
• shape-outside
• skew()(transform-function#skew(%29)
• skewX()(transform-function#skewX(%29)
• skewY()(transform-function#skewY(%29)
• speak-as (@counter-style)
• src (@font-face)
• steps()
• <string>
• @styleset
• styleset()(@font-face/font-variant#styleset(%29)
• @stylistic
• stylistic()(@font-face/font-variant#stylistic(%29)
• suffix (@counter-style)
• @supports
• @swash
• swash()(@font-face/font-variant#swash(%29)
• symbols (@counter-style)
• symbols()
• system (@counter-style)

T

• tab-size
• table-layout
• :target
• target-counter()
• target-counters()
• target-text()
• text-align
• text-align-last
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-transform
• text-underline-position
• <time>
• <timing-function>
• top
• @top-center
• @top-left
• @top-left-corner
• @top-right
• @top-right-corner
• touch-action
• transform
• transform-box
• <transform-function>
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• translate()(transform-function#translate(%29)
• translate3d()(transform-function#translate3d(%29)
• translateX()(transform-function#translateX(%29)
• translateY()(transform-function#translateY(%29)
• translateZ()(transform-function#translateZ(%29)
• turn

U

• unicode-bidi
• unicode-range (@font-face)
• :unresolved
• unset
• <url>
• url()(url#The_url(%29_functional_notation)
• user-zoom (@viewport)

V

• :valid
• var()(var(%29)
• vertical-align
• vh
• @viewport
• visibility
• :visited
• vmax
• vmin
• vw

W

• white-space
• widows
• width
• width (@viewport)
• will-change
• word-break
• word-spacing
• word-wrap
• writing-mode

Z

• z-index
• zoom (@viewport)

其他

• --*

选择器

• 基本选择器
  • 类型选择器 elementname
  • 类选择器 .classname
  • ID选择器 #idname
  • 通用选择器 * ns|* *|*
  • 属性选择器 [attr=value]
• 组合器（更多信息）
  • 相邻的兄弟组合器 A + B
  • 一般兄弟组合子 A ~ B
  • 儿童combinator A > B
  • 后代组合子 A B
• 伪类（更多信息）
  • :active
  • :any
  • :any-link
  • :checked
  • :default
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited
• 伪元素（更多信息）
  • ::after
  • ::backdrop
  • ::before
  • ::cue
  • ::first-letter
  • ::first-line
  • ::grammar-error
  • ::marker
  • ::placeholder
  • ::selection
  • ::spelling-error

另请参见：选择器级别3规范中选择器的完整列表。

概念

• CSS语法
• 在规则
• 注释
• 级联
• 特异性
• 遗产
• 初始值
• 指定的值
• 计算值
• 使用的值
• 实际价值
• 已解决的价值
• 盒模型
• 替换元素
• 值定义语法
• 速记属性
• 掌握边缘崩溃
• 包含块
• 可视化格式模型
• 布局模式

DOM-CSS / CSSOM

主要对象类型：

• document.styleSheets
• styleSheetsi.cssRules
• cssRulesi.cssText (selector & style)
• cssRulesi.selectorText
• elem.style
• elem.style.cssText (just style)
• elem.className
• elem.classList

重要方法：

• CSSStyleSheet.insertRule
• CSSStyleSheet.deleteRule