📜  如何将两个 CSS 类应用于单个元素?

📅  最后修改于: 2021-08-31 02:18:08             🧑  作者: Mango

多个类可以应用于 HTML 中的单个元素,并且可以使用 CSS 对其进行样式设置。在本文中,我们将只使用两个类。但是用于分配两个类的概念也可以扩展到多个类。

为 HTML 中的元素分配类:
类的名称可以写在“class”属性中
注意:类的名称必须以空格分隔。

句法:

然后可以使用“ .class_1 ”和“ .class_2 ”单独设置类的样式,或者可以仅使用“ .class_1.class_2 ”设置包含两个类的元素的样式。

单独设置样式:以下示例中的两个类都是单独设置样式的。

句法:


例子:



  

    
    
        How to apply two CSS classes
        to a single element ?    
    
  
    

  

    

        Hello there.     

           

        Welcome to GeeksForGeeks.     

  

输出:

在上面的示例中,类“para”的样式应用于两个段落,而类“second_class”的样式仅应用于第二个段落。

包含两个类的样式元素:包含两个类的元素将仅被样式化。包含两个类中的一个或零个的所有其他元素将不会被设置样式。

注意:在 CSS 选择器中,类名之间没有空格。

句法:


例子:



  

    
    
        How to apply two CSS classes
        to a single element?
    
  
    

  

    

        Hello there.     

           

        Welcome to GeeksForGeeks.     

           

        Like our platform?     

  

输出:

在上面的示例中,样式仅应用于第二个段落,因为它是包含这两个类的唯一标记。

使用 JavaScript 分配类:我们还可以使用 JavaScript 添加和删除类。我们将使用标签的“classList”属性,该标签将类名作为 DOMTokenList 对象返回。我们将使用“add()”方法动态地向一个元素添加多个类。

add(class_1, class_2, …):用于为 HTML 中的元素分配一个类或多个类。
在这个例子中,我们将把类“para”和“second”分配给 ID 为“to_be_styled”的段落。造型技术与上述相同。

例子:



  

    
      
    
        How to apply two CSS classes
        to a single element?
    
  
    
  
    

  

    

Hello there.

           

        Welcome to GeeksForGeeks.     

           

Like our platform?

              

输出:
点击前:

点击后: