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

2021年3月12日14:08:33 发表评论 720 次浏览

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 >

输出如下:

el-el2

支持的浏览器:下面列出了由元素~元素选择器支持的浏览器:

  • 苹果Safari 3.2
  • 谷歌浏览器4.0
  • Firefox 3.5
  • 歌剧9.6
  • Internet Explorer 7.0

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: