CSS 参考 - CSS | MDN

基本规则语法

样式规则语法

style-rule ::=
    selectors-list {
      properties-list
    }

其中

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]

请参阅下文中的选择器、伪类和伪元素的索引。每个指定值的语法取决于为每个指定属性定义的数据类型。

样式规则示例

css

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

有关选择器语法的入门介绍，请参阅我们的 CSS 选择器指南。请注意，规则定义中的任何语法错误都会导致整个规则无效。浏览器会忽略无效的规则。请注意，CSS 规则定义完全是基于文本的（Unicode），而 DOM-CSS / CSSOM（规则管理系统）是基于对象的。

@ 规则语法

由于 @ 规则的结构差异很大，请参阅 @ 规则以查找你想要的特定规则的语法。

索引

备注： 此索引不包括 SVG 专用的表示属性，这些属性可在 SVG 元素上用作 CSS 属性。

备注： 本索引中的属性名称不包括 JavaScript 名称，这些名称与 CSS 标准名称不同。

-

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

x
:xr-overlay
xywh()

Y

y

Z

选择器

以下是各种选择器，它们允许样式根据 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 选择的元素之前——但不一定是紧邻的前面。
子组合器 A > B: 指定由 B 选择的元素是由 A 选择的元素的直接子元素。
后代组合器 A B: 指定由 B 选择的元素是由 A 选择的元素的后代，但不一定是直接子元素。
列组合器 A || B 实验性: 指定由 B 选择的元素位于由 A 指定的表格列内。跨越多列的元素被视为所有这些列的成员。