使用此CSS 参考页面以浏览按 字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及@ 规则。你也可以浏览 按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。
基本规则语法
样式规则语法
selectorlist {
property: value;
[more property:value; pairs]
}
... 其中 selectorlist 是:selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
参阅后面的 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
:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()
::backdropbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)<blend-mode>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()
calc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()contentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cuecursor<custom-ident>
:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()
fallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreen
gapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolation
:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()
marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-heightmax-height (@viewport)max-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmms
@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>
object-fitobject-position:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
pad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpx
radradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()row-gap
ssaturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scopescroll-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-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewX()skewY()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)
tab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()turn
选择器
基本选择器
- 元素选择器
elementname(元素名称) - 类选择器
.classname(类名) - ID 选择器
#idname(ID 名) - 通配选择器
*,ns|*,*|*,|* - 属性选择器
[属性=值]
组合选择器
伪类
:active:any-link:blank:checked:current:default:defined:dir():disabled:drop:empty:enabled:first:first-child:first-of-type:fullscreen:future:focus:focus-visible:focus-within:has():host:host():host-context():hover:indeterminate:in-range:invalid:is():lang():last-child:last-of-type:left:link:local-link:not():nth-child():nth-col():nth-last-child():nth-last-col():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past:placeholder-shown:read-only:read-write:required:right:root:scope:target:target-within:user-invalid:valid:visited:where()
伪元素
另见:一份完整的选择器标准 3 选择器列表。
概念
语法和语义
值
布局
DOM-CSS / CSSOM
主要对象类型
DocumentOrShadowRoot.styleSheetsstyleSheets[i].cssRulescssRules[i].cssText(选择器 & 样式)cssRules[i].selectorTextHTMLElement.styleHTMLElement.style.cssText(仅样式)Element.classNameElement.classList
重要方法
相关链接
- Mozilla CSS extensions (prefixed with
-moz) - WebKit CSS extensions (mostly prefixed with
-webkit) - Microsoft CSS extensions (prefixed with
-ms)
文档标签和贡献者
标签:
此页面的贡献者:
RainSlide,
mdnwebdocs-bot,
flowfire,
codeofjackie,
Idealist_EZ,
Ende93,
PaperFlu,
zsxeee,
PerlaHGL,
0lightbee0,
fygyx1,
Go7hic,
zhang-kai,
zhyupe,
kevinfszu,
chliuqi,
xiaolong,
Breezewish,
ziyunfei,
teoli,
anjianshi,
Jimmie_Felidae,
alimon,
tregagnon,
Mgjbot,
TigerSoldier,
Emcc,
Mickeyboy
最后编辑者:
RainSlide,

