Question

CSS中的~号是什么意思

在css中通过hover实现一些样式的改变，如.abc:hover .def{ 具体的样式} ； 可是今天看到一个导航是这样写的abc:hover~ .def{ 具体的样式}， 当我把这个~去掉之后，就会失效，这个样式主要是改变图中黄色的那个选中样式；想问下，这个是怎么回事？





Answer 1

这是 CSS3 element1~element2 选择器

定义和用法

　　element1~element2 选择器 element1 之后出现的所有 element2。

　　两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

实例

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

p~ul
{
background:#ff0000;
}

Answer 2

CSS [attribute~=value] 选择器
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp 这里有详细说明

Answer 3

element1~element2

p~ul

选择前面有 <p> 元素的每个 <ul> 元素。