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

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

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 >

输出如下:

element_element

范例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 >

输出如下:

element_element2

支持的浏览器:下面列出了element + element选择器支持的浏览器:

  • 苹果Safari
  • 谷歌浏览器
  • 火狐浏览器
  • 歌剧
  • Internet Explorer 7.0

木子山

发表评论

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