CSS如何使用类选择器.class？代码示例

2021年3月18日15:03:16 发表评论 682 次浏览

.class类选择器用于选择属于特定类属性的所有元素。要选择具有特定类的元素, 请使用(.)字符并指定类名称。类名主要用于将CSS属性设置为给定的类。

语法如下：

.class {
    // CSS property
}

范例1：

<!DOCTYPE html>
< html >
     < head >
         < style >
             .geeks {
                 color:green;
             } 
             .gfg {
                 background-color: yellow;
                 font-style:italic;
                 color:green;
             }
          
         </ style >
     </ head >
      
     < body style = "text-align:center" >
          
         < h1 class = "geeks" >
             lsbin
         </ h1 >
          
         < h2 >.class Selector</ h2 >
          
         < div class = "gfg" >
             < p >lsbin: A computer science portal</ p >
         </ div >
     </ body >
</ html >

输出如下：

范例2：本示例描述了用空格分隔的类名称。

<!DOCTYPE html>
< html >
     < head >
         < title >class selector</ title >
         < style >
             .geeks {
                 color:green;
             } 
             .gfg {
                 background-color:yellow;
              
         </ style >
     </ head >
      
     < body style = "text-align:center" >
          
         < h1 class = "geeks" >
             lsbin
         </ h1 >
          
         < h2 class = "gfg" >.class Selector</ h2 >
          
         < p class = "geeks gfg" >
             lsbin: A computer science portal
         </ p >
     </ body >
</ html >

输出如下：