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

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

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 >

输出如下：