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

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

关键字索引

: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()

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

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>

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

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

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

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

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

<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

justify-content

@keyframes
khz

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

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

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

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

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
quotes

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

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

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

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

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

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

重要方法：

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18