📌  相关文章
📜  如何使用CSS通过数据属性选择元素？

📅  最后修改于: 2021-08-31 07:03:49             🧑  作者: Mango

CSS 允许选择具有特定属性或属性值的 HTML 元素。可以通过多种方式选择元素。下面给出了一些例子：

  • [属性]：选择具有指定属性的元素。
  • [attribute=”value”]：选择具有指定属性和值的元素。
  • [attribute~=”value”]：选择属性值包含指定词的元素。
  • [attribute|=”value”]：选择具有指定属性的元素，该属性以指定值开头。
  • [attribute^=”value”]：选择属性值以指定值开头的元素。
  • [attribute$=”value”]：选择属性值以指定值结尾的元素。
  • [attribute*=”value”]：选择属性值包含指定值的元素。

示例 1：此示例通过使用 CSS选择元素 [target]来更改 元素的背景颜色。 

 
 
  
 
     
        Attribute selector in CSS
    
      
    
 
      
 
  
    
 
        GeeksForGeeks 
    
 
      
    
        geeksforgeeks.org
    
      
    


      
    
        google.com
     
 
  
                    

输出：

示例 2：此示例通过使用 CSS选择具有 [target = “_top”] 的元素来更改 元素的背景颜色和文本颜色。 

 
 
  
 
     
        Attribute selector in CSS
    
      
    
 
          
 
      
    
 
        GeeksForGeeks 
    
 
      
    
        geeksforgeeks.org
    
      
    


      
    
        google.com
     
 
  
                    

输出：

示例 3：此示例通过使用 CSS选择具有 [class^=”top”] 的元素来更改

元素的背景颜色和文本颜色。 

 
 
  
 
     
        Attribute selector in CSS
    
      
    
     
  
 
  
    
 
        GeeksForGeeks 
    
 
      
    
A computer science portal

    
Attribute Selector Example

    
CSS does not applies here
 
 
  
                    

输出：