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 >
输出如下:
支持的浏览器:下面列出了由元素~元素选择器支持的浏览器:
- 苹果Safari 3.2
- 谷歌浏览器4.0
- Firefox 3.5
- 歌剧9.6
- Internet Explorer 7.0