CSS 参考使用此 **CSS 参考** 浏览所有标准 CSS 属性、伪类、伪元素、数据类型、函数表示法 和 @规则 的 字母索引。您还可以浏览 关键 CSS 概念 和 按类型组织的选择器列表。还包括一个简短的 DOM-CSS/CSSOM 参考。
基本规则语法样式规则语法cssstyle-rule ::=
selectors-list {
properties-list
}
哪里
cssselectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list]
请参阅下面 选择器、伪类 和 伪元素 的索引。每个指定的 值 的语法取决于为每个指定的 属性 定义的数据类型。
样式规则示例
cssstrong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
有关选择器语法的初学者级介绍，请参阅我们的 CSS 选择器指南。请注意，规则定义中的任何 语法 错误都会使整个规则失效。浏览器会忽略无效规则。请注意，CSS 规则定义完全是 (ASCII) 基于文本的，而 DOM-CSS/CSSOM（规则管理系统）是 基于对象的。
@规则语法由于 @规则的结构差异很大，请参阅 @规则 以查找您想要的特定 @规则的语法。
索引
注意：此索引不包括 SVG 独有的表示属性，这些属性可用作 SVG 元素上的 CSS 属性。
注意：此索引中的属性名称 **不** 包括 JavaScript 名称，JavaScript 名称与 CSS 标准名称不同。
---*-webkit-line-clampAabs()accent-coloracos():activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalign-tracksallanchor-nameanchor-scopeanimationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-function@annotation:any-linkappearanceascent-override (@font-face)asin()aspect-ratioatan()atan2()attr()B::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebase-palette (@font-palette-values)::before (:before):blankbleed (@page)block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()Ccalc()caption-sidecaretcaret-colorcaret-shape@character-variant@charset:checkedcircle()clamp()clearclipclip-pathcolorcolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainercontainer-namecontainer-typecontentcontent-visibilitycontrast()cos()counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-region:currentcursorlength#caplength#chlength#cmDangle#deg:default:defineddescent-override (@font-face):dirdirection:disableddisplaydrop-shadow()resolution#dpcmresolution#dpiresolution#dppxEelement()ellipse():emptyempty-cells:enabledenv()exp()length#emlength#exFfallback (@counter-style)field-sizingfilter:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapflex_value#frfloat:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette@font-palette-valuesfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)forced-color-adjustformat():fullscreen:futureGangle#gradgap::grammar-errorgrayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowsHfrequency#Hzhanging-punctuation:hasheight@historical-forms:host():host-context():hoverhsl()hue-rotate()hwb()hyphenate-characterhyphenate-limit-charshyphenshypot()Iimage()image-orientationimage-renderingimage-resolutionimage-set()@import:in-range:indeterminateinheritinherits (@property)initialinitial-letterinitial-letter-aligninitial-value (@property)inline-sizeinput-securityinsetinset()inset-areainset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start:invalidinvert():isisolationlength#iclength#inJjustify-contentjustify-itemsjustify-selfjustify-tracksKfrequency#kHz@keyframesLlab():lang:last-child:last-of-type@layerlayer()layer() (@import)lch()leader():leftleft@left-bottomletter-spacinglight-dark()line-breakline-clampline-gap-override (@font-face)line-heightline-height-steplinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal():local-linklog()Mlength#mmmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemasonry-auto-flowmath-depthmath-shiftmath-stylematrix()matrix3d()max()max-block-sizemax-heightmax-inline-sizemax-linesmax-width@mediamin()min-block-sizemin-heightmin-inline-sizemin-widthminmax()mix-blend-modemod()time#msN@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-typeOobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotate:only-child:only-of-typeopacityopacity():optionalorder装饰orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-y覆盖层覆盖颜色 (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yP伪类伪元素长度#pc长度#pt长度#px填充 (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@page
pagepage-break-afterpage-break-beforepage-break-inside页面方向 (@page)paint()paint-order::part:pastpath():pausedperspectiveperspective()perspective-origin:picture-in-pictureplace-contentplace-itemsplace-self::placeholder:placeholder-shown:playingpointer-eventspolygon()position定位锚点@position-tryposition-tryposition-try-optionsposition-try-order定位可见性pow()前缀 (@counter-style)print-color-adjust@propertyQ长度#QquotesR角度#rad长度#remradial-gradient()范围 (@counter-style)ray():read-only:read-writerect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient():requiredresizereversed()恢复rgb():rightright@right-bottom:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()row-gapruby-alignruby合并ruby-positionSsaturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scope@scopescroll()scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-type滚动时间轴滚动时间轴轴线滚动时间轴名称scrollbar-colorscrollbar-gutterscrollbar-width::selectionselector()sepia()<形状>shape-image-thresholdshape-marginshape-outsidesign()sin()尺寸 (@page)尺寸调整 (@font-face)skew()skewX()skewY()::slottedspeak-as (@counter-style)::spelling-errorsqrt()src (@font-face)@starting-stylesteps()@styleset@stylistic后缀 (@counter-style)@supportssupports() (@import)@swash符号 (@counter-style)symbols()语法 (@property)系统 (@counter-style)时间#sT角度#turntab-sizetable-layouttan():targettarget-counter()target-counters()::target-texttarget-text():target-withintext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-line文本装饰跳过text-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadow文本尺寸调整文本间距修剪text-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-style
选择器以下是各种 选择器，它们允许根据 DOM 中元素的各种特性有条件地应用样式。
基本选择器基本选择器是基础选择器；这些是最基本的选择器，经常组合起来创建其他更复杂的选择器。
通用选择器 *
类型选择器 elementname
类选择器 .classname
ID 选择器 #idname
属性选择器 [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 中未包含的实体。
另请参阅 选择器规范中的选择器 和 伪元素规范。
概念语法和语义
CSS 语法
At规则
级联
注释
描述符
继承
简写属性
特异性
值定义语法
CSS 单位和值类型
CSS 函数表示法
值
实际值
计算值
初始值
解析值
指定值
使用值
布局
块级格式化上下文
盒子模型
包含块
布局模式
外边距折叠
替换元素
堆叠上下文
视觉格式化模型
DOM-CSS / CSSOM主要对象类型
Document.styleSheets
styleSheets[i].cssRules
cssRules[i].cssText（选择器和样式）
cssRules[i].selectorText
HTMLElement.style
HTMLElement.style.cssText（仅样式）
Element.className
Element.classList
重要方法
CSSStyleSheet.insertRule()
CSSStyleSheet.deleteRule()
另请参阅
Mozilla CSS 扩展（以 -moz- 为前缀）
WebKit CSS 扩展（大部分以 -webkit- 为前缀）
外部链接
CSS 指数 (w3.org)