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 指定的表格列內。跨越多列的元素被視為所有這些列的成員。