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 名称。

resolution#x

Others

--*

选择器

基本选择器

通配选择器 *, ns|*, *|*, |*
元素选择器 elementname(元素名称)
类选择器 .classname(类名)
ID 选择器 #idname(ID 名)
属性选择器 [属性=值]

分组选择器

选择器列表 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")}}

伪元素

- ::after (:after)
- ::backdrop Experimental
- ::before (:before)
- ::cue (:cue)
- ::first-letter (:first-letter)
- ::first-line (:first-line)
- ::grammar-error Experimental
- ::marker Experimental
- ::placeholder Experimental
- ::selection
- ::slotted()
- ::spelling-error Experimental

另见：一份完整的选择器标准 3 选择器列表。

概念

语法和语义

值

布局

DOM-CSS / CSSOM

主要对象类型

DocumentOrShadowRoot.styleSheets
styleSheets[i].cssRules
cssRules[i].cssText （选择器 & 样式）
cssRules[i].selectorText
HTMLElement.style (en-US)
HTMLElement.style.cssText (en-US)（仅样式）
Element.className
Element.classList