css - CSS3 中的 : body[data-page~ ='hello' ], 是什么意思?

标签 css css-selectors

在CSS3中,有什么区别:

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

}

body[data-page='hello'] {

}

我已经看到 ~ 被称为一般兄弟组合器,http://css-tricks.com/child-and-sibling-selectors/但在上面的上下文中我不明白。

谢谢。

最佳答案

来自CSS3 specification :

[att=val]: Represents an element with the att attribute whose value is exactly "val".

[att~=val]: Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

因此 <body data-page="hello world">将与第一条规则匹配,但不会与第二条规则匹配。

关于css - CSS3 中的 : body[data-page~ ='hello' ], 是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18046264/

相关文章:

css - 标签的 CSS 选择器之前的句号

CSS "::"含义

css - 为什么 flex-basis 属性会被覆盖?

javascript - 元素在 Flexslider 中变得模糊

html - 图像悬停时如何叠加

CSS:包含图像和文本的列表。作出回应

html - 滚动容器内具有固定布局的表格不占用定义的宽度

具有多个子类的选择器的 HTML 语法

html - CSS 选择最后一个跨度元素

CSS 伪选择不改变 text-shadow 属性