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

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

.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 >

输出如下:

CSS |类选择器1

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

输出如下:

CSS |类选择器2

支持的浏览器:支持的浏览器。类选择器如下:

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

木子山

发表评论

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