CSS3 element1~element2 选择器用于选择文档中与 element1 匹配的元素后面的所有 element2 元素。
语法
-----------------
其中:
- element1:与第一个元素匹配的 CSS 选择器。
- ****:波浪号 () 符号,表示“跟随”。
- element2:与后续元素匹配的 CSS 选择器。
用法
element1~element2 选择器用于选择:
- 与 element1 匹配的元素后面的所有 element2 元素。
- 与 element1 匹配的元素后面紧邻的 element2 元素。
- 与 element1 匹配的元素后面任何位置的 element2 元素。
示例
选择所有段落 ( ) 元素后面紧邻的标题 元素:
---- - ------ ---- -
选择所有列表 () 元素后面紧邻的列表项 (
----- - ----------------- ---------- -
选择所有图像 () 元素后面任何位置的超链接 () 元素:
----- - ------------ ----- -
与其他选择器的比较
element1~element2 选择器与以下选择器类似:
- element1 + element2:选择与 element1 匹配的元素后面紧邻的 element2 元素。
- element1 > element2:选择 element1 元素的直接子元素中与 element2 匹配的元素。
然而,element1~element2 选择器更具通用性,因为它可以匹配与 element1 匹配的元素后面任何位置的 element2 元素。
浏览器支持
element1~element2 选择器在所有现代浏览器中都得到广泛支持。
结论
element1~element2 选择器是一个强大的工具,可用于选择文档中与特定元素匹配的元素后面的其他元素。它非常适合在需要对特定元素后面的内容进行样式化时使用。