CSS 参考手册 目录

CSS3 element1~element2 选择器

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 选择器是一个强大的工具,可用于选择文档中与特定元素匹配的元素后面的其他元素。它非常适合在需要对特定元素后面的内容进行样式化时使用。


下一篇:CSS 参考手册