Question

CSS里面 ~选择符的功能是什么?

#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } 这段CSS里面 ~选择符的功能是什么?

Answer 1

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。
所有主流浏览器都支持 [attribute~=value] 选择器。

对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。

CSS3 兄弟选择符(E~F)
语法：

E~F{ sRules }

说明：

选择E元素后面的所有兄弟元素F。

追问

这是~=value 样例里面也含“等于号”的吧？

追答

通用兄弟元素选择器
通用兄弟元素选择器通过两个简单选择符通过波浪号（~）分隔组成。它匹配第二个简单
选择符中所匹配的元素，而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素，但是第二个元素不一定必须紧跟在第一个元
素之后。这条CSS规则将会匹配所有p元素之后ul元素：

p ~ ul { background:#ff0; }

Answer 2

需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

你上面的#tab1:checked ~ #content1表示id为TAB1选择状态包括有ID为content1的子元素。

样式中逗号为分隔，意思是这几个选择器同用{}里的样式。

:checked
匹配用户界面上处于选中状态的元素。(用于input type为radio与checkbox时)