1. 程式人生 > >CSS3後代選擇器和同級選擇器簡介和例項

CSS3後代選擇器和同級選擇器簡介和例項

CSS selector level 3規範中定義了一些和文件層級結構有關的連線選擇器(或稱組合選擇器),

分為後代選擇器(Descendant combinator/Child combinators)同級選擇器(Sibling combinators)

其中後代選擇器分以下3個:

1. 空格。div p: 表示p是div的後代元素, div是p的祖先。該選擇器選擇所有div下的p後代元素。

2. 箭頭(>)。表示直系關係。div > p 表示div的兒子輩的元素。

3. 星號(*)。表示隔代關係。div * p表示div的孫子輩及之後的元素。


同級選擇器分為以下2個:

1. 加號(+)。表示緊隨關係。h1 + h2: 表示緊跟在h1後面的h2元素。
2. 波浪號(~)。表示後續關係。h1 ~ h2: 表示和h1元素同在一個父元素下的後續h2元素(中間可以隔著其他元素)。

關於CSS3選擇器參考閱讀: