這是什麼意思：body [data-page〜='hello']，在CSS3中？

在CSS3，之間有什麼區別：這是什麼意思：body [data-page〜='hello']，在CSS3中？

body[data-page~='hello'] { 

}

和

body[data-page='hello'] { 

}

我已經看到了〜被稱爲一般的兄弟組合子，http://css-tricks.com/child-and-sibling-selectors/但我不會在理解上述背景。

謝謝。

來源

2013-08-04 Adam Waite

從CSS3 specification：

[att=val]：表示與att屬性，其值是恰好「VAL」的元素。

[att~=val]：表示與att屬性，其值是單詞的whitespace - 分隔列表中，其中的一個是完全「VAL」的元素。如果「val」包含空格，它將永遠不會代表任何內容（因爲單詞是，空格分隔）。另外如果「val」是空字符串，它將永遠不會代表任何東西。

因此<body data-page="hello world">將由第一規則而不是第二匹配。

來源

2013-08-04 18:43:03

還要注意，正如舊規範的鏈接所證明的那樣，這些選擇器對CSS3並不陌生（而一般的兄弟組合器''是新的）。最新的規格在這裏：http://www.w3.org/TR/css3-selectors – BoltClock

@BoltClock：感謝您的注意。我已經更新了我的答案。 –

這是什麼意思：body [data-page〜='hello']，在CSS3中？

回答

相關問題