CSS 元素?元素选择器用法示例

CSS中的元素~元素选择器用于匹配第二个元素(如果它跟在第一个元素之后)(不需要立即)。它们都应具有相同的父元素。
语法如下:

element ~ element { //CSS Property }

范例1:在下面的程序中, 你可以看到" p~ul"将仅选择和设置段落后面的第二个无序列表的样式, 而不是单独列出的第一个列表的样式。
< !DOCTYPE html> < html > < head > < title > CSS element ~ element Selector < / title > < style > p ~ ul { color:white; background: green; } < / style > < / head > < body style = "" > < h2 style = "color:green; text-align: center; " > CSS element ~ element Selector< / h2 > < div > Searching algorithms< / div > < ul > < li > Binary search< / li > < li > Linear search< / li > < / ul > < p > Sorting Algorithms< / p > < ul > < li > Merge sort< / li > < li > Quick sort< / li > < / ul > < / body > < / html >

输出如下:
CSS 元素?元素选择器用法示例

文章图片
范例2:
< !DOCTYPE html> < html > < head > < title > CSS element ~ element Selector < / title > < style > p ~ span { color:white; background: green; } < / style > < / head > < body style = "" > < !--< h1 style = "color:green; text-align: center; "> --> < !--lsbin--> < !--< /h1> --> < h2 style = "color:green; text-align: center; " > CSS element ~ element Selector< / h2 > < span > This is the first span.< / span > < p > This is the first paragraph.< / p > < code > Some code< / code > < span > A computer science< / span > < code > More code.....< / code > < span > portal for geeks.< / span > < / body > < / html >

输出如下:
CSS 元素?元素选择器用法示例

文章图片
【CSS 元素?元素选择器用法示例】支持的浏览器:下面列出了由元素~元素选择器支持的浏览器:
  • 苹果Safari 3.2
  • 谷歌浏览器4.0
  • Firefox 3.5
  • 歌剧9.6
  • Internet Explorer 7.0

    推荐阅读