CSS 元素+元素选择器用法介绍

2021年3月12日14:11:01 发表评论 764 次浏览

CSS中的element + element选择器用于设置放置在第一个指定元素之后(而不是内部)的每个元素的样式。

语法如下：

element + element {
    //CSS Property

范例1：在下面的程序中, " p + p"选择器选择并设置每对连续段落元素的样式。如果连续超过2个p元素, 然后为最后两个元素设置样式。

<!DOCTYPE html>
< html >
     < head >
         < title >
             CSS | element+element Selector
         </ title >
         < style >
             p + p {
                 color:white;
                 background: green;
             }
         </ style >
     </ head >
     < body style = "text-align: center;" >
         < h1 style = "color:green;" >
             lsbin
         </ h1 >
         < h2 >
             CSS | element+element Selector
  
         </ h2 >
          
         < p >This is the first paragraph.</ p >
         < p >This is the second paragraph</ p >
         < p >This is the third paragraph</ p >
          
         < div >
           < p >This is the forth paragraph</ p >
           < p >This is the fifth paragraph.</ p >
         </ div >
</ body >
</ html >

输出如下：

范例2：

<!DOCTYPE html>
< html >
     < head >
         < title >
         CSS | element+element Selector
         </ title >
         < style >
             div + p {
                 color:white;
                 background: green;
                 padding:2px;
             }
         </ style >
     </ head >
     < body style = "text-align: center;" >
         < div >
             < h2 style = "color:green;" >
                 CSS | element+element Selector
             </ h2 >
              
             < p >
                 A computer science portal for geeks.
             </ p >
         </ div >
          
         < p >Geeks Classes is a quick course to cover 
         algorithms questions.</ p >
          
         < p >This paragraph will not be styled.</ p >
     </ body >
</ html >

输出如下：