3

在 CSS3 中，有什么区别：

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

}

和

body[data-page='hello'] {

}

我已经看到 ~ 被称为通用兄弟组合器，http://css-tricks.com/child-and-sibling-selectors/但我在上面的上下文中不理解它。

谢谢。

4

1 回答 1

14

来自CSS3 规范：

[att=val]: 表示具有att属性值恰好为“val”的元素。

[att~=val]: 表示具有att属性的元素，其值为以空格分隔的单词列表，其中一个恰好是“val”。如果“val”包含空格，它永远不会代表任何东西（因为单词是用空格分隔的）。此外，如果“val”是空字符串，它永远不会代表任何东西。

因此<body data-page="hello world">将被第一个规则匹配，但不是第二个。

于 2013-08-04T18:43:03.163 回答