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 >

输出如下：

文章图片
范例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 >

输出如下：