📌  相关文章
📜  “.”的区别和 CSS 中的“#”选择器

📅  最后修改于: 2021-08-30 12:01:05             🧑  作者: Mango

dot(.) 和 hash(#) 都用作 CSS 选择器。两个选择器都用于选择内容以设置样式。 CSS 选择器根据 id、class、type、attribute 等选择 HTML 元素。

id 选择器(“#”)： id 选择器选择 HTML 元素的 id 属性来选择特定元素。一个 id 在页面内始终是唯一的，因此选择它是为了选择一个唯一的元素。它用散列字符(#) 写入，后跟元素的 id。

  • 句法： 
    #element_id_name{
  // CSS properties
}
  • 示例：在此代码中，我们将仅使用 id 选择器为 HTML 元素设置样式。 
    
  

  

    CSS Selector id(#)
    

  

    
    
        
    GeeksforGeeks
    
        
    A Computer Science portal for Geeks
    
        CSS Selector id(#)
    
    

  
  • 输出：

类选择器(“.”)：类选择器选择具有特定类属性的 HTML 元素。它与句点字符“.”一起使用。 (句号)后跟类名。

  • 句法： 
    .element_class_name{
  // CSS properties
}
  • 示例：在此代码中，我们将仅使用类选择器为 HTML 元素设置样式。 
    
  

  

    CSS class Selector
    

  

    
    
        
    GeeksforGeeks
    
        
    A Computer Science portal for Geeks
    
        CSS Selector class(.)
    
    

  
  • 输出：

class ( "." ) 和 id ( "#" ) 选择器之间的区别：

“.” “#”
The class selector “.” is used to represent class=”class_name” in HTML element. The id selector “#” is used to represent id=”id_name” in HTML element.
Each elements can contain more that one “.” selector means that elements is containing more than one class which is separated by space, the will be selected by multiple dots like .class1 .class2 …. and so on. Each element can contain only one “#” selector, not more than one unlike class selectors.
The “.” selectors are not unique, same selectors can applicable on multiple elements, if the HTML elements holds the same class property like a list of elements can contains the same class. The “#” are unique.

示例： Combine 选择器示例，在本示例中，我们将同时使用两个选择器“.”。和“#” 。 

 
 
     
         
     
      
     
          
        
 
            GeeksforGeeks 
        
 
          
        
#id And .class Selector
 
        
 
            
A computer science portal for Geeks
 
        
 
        
 
             
        
 
     
                     
       

输出：