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

2021-07-09 09:33:35 字數 508 閱讀 6310

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選擇器大全

新增選擇器 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值以val開頭的e元素 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值以val結尾的e元素 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值中含有val的e元素 結構性偽類 e root...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

js原生後代選擇器 CSS 後代選擇器

具體應用 後代選擇器的功能極其強大。有了它,可以使 html 中不可能實現的任務成為可能。假設有乙個文件,其中有乙個邊欄,還有乙個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。解決方法是使用後代選擇器。在這種情況...