CSS 参考
使用此CSS 参考页面以浏览按 字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及@ 规则。你也可以浏览 按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。
基本规则语法
样式规则语法
style-rule ::= selectors-list { properties-list }
... 其中
selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list]
参阅后面的 selector、pseudo-element、pseudo-class 列表。每个指定值的语法取决于为每个指定属性定义的数据类型。
样式规则示例
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
有关 CSS 选择器语法的初学者介绍,请参阅此教程。注意,规则定义中的任何 CSS 语法错误都将使整个规则无效。无效的规则将被浏览器忽略。注意CSS定义完全是基于文本(ASCII)的 , 而 DOM-CSS / CSSOM (规则管理系统) 是基于对象的。
@规则语法
由于@规则间的结构变化很大,请参阅@规则以找到你所想要的特定规则语法。
关键字索引
注意:此索引中的属性名称不包括与CSS标准名称不同的 JavaScript 名称。
-A
: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-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
@annotation
annotation()
:any-link
appearance
aspect-ratio
attr()
::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
<basic-shape>
::before (:before)
:blank
bleed (@page)
(en-US)<blend-mode>
block-overflow
block-size
blur()
border
border-block
border-block-color
(en-US)border-block-end
border-block-end-color
(en-US)border-block-end-style
(en-US)border-block-end-width
(en-US)border-block-start
(en-US)border-block-start-color
(en-US)border-block-start-style
(en-US)border-block-start-width
(en-US)border-block-style
(en-US)border-block-width
(en-US)border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
(en-US)border-end-start-radius
(en-US)border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
(en-US)border-inline-color
border-inline-end
(en-US)border-inline-end-color
(en-US)border-inline-end-style
(en-US)border-inline-end-width
(en-US)border-inline-start
(en-US)border-inline-start-color
(en-US)border-inline-start-style
(en-US)border-inline-start-width
(en-US)border-inline-style
(en-US)border-inline-width
(en-US)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
(en-US)border-start-start-radius
(en-US)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
break-inside
brightness()
calc()
caption-side
caret-color
@character-variant
character-variant()
@charset
:checked
circle()
clamp()
clear
clip
clip-path
<color>
color
color-adjust
(en-US)column-count
column-fill
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
content
content-visibility
(en-US)contrast()
<counter>
counter-increment
counter-reset
counter-set
(en-US)@counter-style
counters()
cross-fade()
(en-US)cubic-bezier()
(en-US)::cue
::cue-region
(en-US):current
(en-US)cursor
<custom-ident>
length#ch
length#cm
angle#deg
:default
:defined
<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
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-feature-settings
font-feature-settings (@font-face)
@font-feature-values
font-kerning
font-language-override
font-optical-sizing
(en-US)font-size
font-size-adjust
font-stretch
font-stretch (@font-face)
(en-US)font-style
font-style (@font-face)
font-synthesis
font-variant
font-variant (@font-face)
(en-US)font-variant-alternates
font-variant-caps
font-variant-east-asian
(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)
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
frequency#Hz
hanging-punctuation
:has
height
height (@viewport)
@historical-forms
:host()
:host-context()
:hover
hsl()
hsla()
hue-rotate()
(en-US)hyphens
<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
inset
(en-US)inset()
inset-block
(en-US)inset-block-end
(en-US)inset-block-start
(en-US)inset-inline
(en-US)inset-inline-end
(en-US)inset-inline-start
(en-US)<integer>
:invalid
invert()
(en-US):is
isolation
length#in
:lang
:last-child
:last-of-type
leader()
:left
left
@left-bottom
<length>
<length-percentage>
letter-spacing
line-break
line-clamp
line-height
line-height-step
(en-US)linear-gradient()
:link
list-style
list-style-image
list-style-position
list-style-type
local()
:local-link
(en-US)
length#mm
margin
margin-block
margin-block-end
(en-US)margin-block-start
margin-bottom
margin-inline
(en-US)margin-inline-end
(en-US)margin-inline-start
(en-US)margin-left
margin-right
margin-top
margin-trim
(en-US)::marker
marks (@page)
(en-US)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-style
(en-US)matrix()
matrix3d()
max()
max-block-size
(en-US)max-height
max-height (@viewport)
(en-US)max-inline-size
(en-US)max-lines
max-width
max-width (@viewport)
(en-US)max-zoom (@viewport)
(en-US)@media
min()
min-block-size
(en-US)min-height
min-height (@viewport)
(en-US)min-inline-size
(en-US)min-width
min-width (@viewport)
(en-US)min-zoom (@viewport)
(en-US)minmax()
mix-blend-mode
time#ms
@namespace
negative (@counter-style)
(en-US):not
:nth-child
:nth-col
(en-US):nth-last-child
:nth-last-col
(en-US):nth-last-of-type
:nth-of-type
<number>
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
orientation (@viewport)
@ornaments
ornaments()
orphans
(en-US):out-of-range
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-anchor
overflow-block
overflow-inline
(en-US)overflow-wrap
overflow-x
overflow-y
overscroll-behavior
overscroll-behavior-block
(en-US)overscroll-behavior-inline
(en-US)overscroll-behavior-x
overscroll-behavior-y
Pseudo-classes
Pseudo-elements
length#pc
length#pt
length#px
pad (@counter-style)
padding
padding-block
(en-US)padding-block-end
(en-US)padding-block-start
(en-US)padding-bottom
padding-inline
(en-US)padding-inline-end
(en-US)padding-inline-start
padding-left
padding-right
padding-top
@page
page-break-after
page-break-before
(en-US)page-break-inside
paint()
(en-US)paint-order
::part
:past
(en-US)path()
(en-US):paused
(en-US)<percentage>
perspective
perspective()
perspective-origin
:picture-in-picture
(en-US)place-content
place-items
place-self
(en-US)::placeholder
:placeholder-shown
:playing
(en-US)pointer-events
polygon()
<position>
position
prefix (@counter-style)
(en-US)@property
angle#rad
length#rem
radial-gradient()
range (@counter-style)
(en-US)<ratio>
:read-only
:read-write
rect()
(en-US)repeat()
repeating-linear-gradient()
repeating-radial-gradient()
:required
resize
<resolution>
revert
(en-US)rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
(en-US)ruby-merge
ruby-position
(en-US)
saturate()
(en-US)scale
scale()
scale3d()
(en-US)scaleX()
scaleY()
scaleZ()
(en-US):scope
scroll-behavior
scroll-margin
scroll-margin-block
(en-US)scroll-margin-block-end
(en-US)scroll-margin-block-start
(en-US)scroll-margin-bottom
(en-US)scroll-margin-inline
(en-US)scroll-margin-inline-end
(en-US)scroll-margin-inline-start
(en-US)scroll-margin-left
(en-US)scroll-margin-right
(en-US)scroll-margin-top
scroll-padding
(en-US)scroll-padding-block
(en-US)scroll-padding-block-end
(en-US)scroll-padding-block-start
(en-US)scroll-padding-bottom
(en-US)scroll-padding-inline
(en-US)scroll-padding-inline-end
(en-US)scroll-padding-inline-start
(en-US)scroll-padding-left
(en-US)scroll-padding-right
(en-US)scroll-padding-top
(en-US)scroll-snap-align
(en-US)scroll-snap-stop
(en-US)scroll-snap-type
scrollbar-color
scrollbar-gutter
(en-US)scrollbar-width
::selection
selector()
sepia()
(en-US)<shape>
(en-US)shape-image-threshold
shape-margin
shape-outside
size (@page)
(en-US)skew()
skewX()
skewY()
::slotted
speak-as (@counter-style)
::spelling-error
src (@font-face)
steps()
(en-US)<string>
@styleset
styleset()
@stylistic
stylistic()
suffix (@counter-style)
(en-US)@supports
@swash
swash()
symbols (@counter-style)
(en-US)symbols()
(en-US)syntax (@property)
system (@counter-style)
(en-US)time#s
angle#turn
tab-size
table-layout
:target
target-counter()
target-counters()
::target-text
(en-US)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
(en-US)text-underline-position
<time>
<time-percentage>
<timing-function>
top
@top-center
touch-action
transform
transform-box
<transform-function>
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
translate
translate()
translate3d()
translateX()
translateY()
translateZ()
(en-US)
unicode-bidi
unicode-range (@font-face)
(en-US)unset
<url>
url()
:user-invalid
(en-US)user-select
user-zoom (@viewport)
(en-US)
length#vh
length#vmax
length#vmin
length#vw
:valid
var()
vertical-align
@viewport
viewport-fit (@viewport)
visibility
:visited
选择器
基本选择器
分组选择器
- 选择器列表
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
选择的元素的后代,但不一定是直接子代。
伪类
- {{Page("/zh-CN/docs/Web/CSS/Pseudo-classes", "index")}}
伪元素
另见:一份完整的选择器标准 3 选择器列表。
概念
语法和语义
值
布局
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
重要方法
相关链接
- Mozilla CSS extensions (en-US) (prefixed with
-moz
) - WebKit CSS extensions (mostly prefixed with
-webkit
) - Microsoft CSS extensions (en-US) (prefixed with
-ms
)