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

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

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 >

输出如下：