CSS如何使用元素选择器?代码示例

2021年3月23日14:23:27 发表评论 715 次浏览

CSS中的元素选择器用于将所有用逗号分隔的元素设置为相同样式。

语法如下:

element, element {
    // CSS Property
}

范例1:

<!DOCTYPE html>
< html >
     < head >
         < title >
             element, element Selector
         </ title >
          
         < style >
          
             /* Add same CSS property to all comma 
             separated elements */
             h1, h2, div, p {
                 text-align: center;
             }
              
             div, p {
                 background-color: green;
                 color: white;
             }
         </ style >
     </ head >
      
     < body >
         < h1 style = "color: green;" >
             lsbin
         </ h1 >
          
         < h2 >element, element Selector</ h2 >
          
         < div >
             A computer science portal for geeks.
         </ div >
         < p >Welcome to geeks classes.</ p >
     </ body >
</ html >

输出如下:

元素元素

范例2:

<!DOCTYPE html>
< html >
     < head >
         < title >
             element, element Selector
         </ title >
          
         < style >
          
             /* Add same CSS property to all comma 
             separated elements */
             h1, h2, p {
                 text-align: center;
             }
             ul, p {
                 background-color: green;
                 color: white;
             }
         </ style >
     </ head >
      
     < body >
         < h1 style = "color: green;" >
             lsbin
         </ h1 >
         < h2 >element, element Selector</ h2 >
         < p >Welcome to geeks classes.</ p >
          
         < div >Different algorithm techniques:</ div >
         < ul >
             < li >Searching Algorithms</ li >
             < li >Sorting Algorithms</ li >
             < li >Graph Algorithms</ li >
         </ ul >
     </ body >
</ html >

输出如下:

element-element2

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

  • 苹果Safari
  • 谷歌浏览器
  • 火狐浏览器
  • 歌剧
  • IE浏览器

木子山

发表评论

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