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

多个类可以应用于 HTML 中的单个元素，并且可以使用 CSS 对其进行样式设置。在本文中，我们将只使用两个类。但是用于分配两个类的概念也可以扩展到多个类。
为 HTML 中的元素分配类：
类的名称可以写在“class”属性中。
注意：类的名称必须以空格分隔。

句法：

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

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

例子：

html

 

    
    
 
    

 

    

        Hello there.
    
 
     
    

        Welcome to GeeksForGeeks.
    
 

 

输出：

在上面的示例中，类“para”的样式应用于两个段落，而类“second_class”的样式仅应用于第二个段落。
包含两个类的样式元素：将仅对包含两个类的元素进行样式化。包含两个类中的一个或零个的所有其他元素将不会被设置样式。
注意：在 CSS 选择器中，类名之间没有空格。
句法：

例子：

html

 

    
    
 
    

 

    

        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”的段落。造型技术与上述相同。
例子：

html

 

    
     
    
        How to apply two CSS classes
        to a single element?
    
 
    
        .para.second {
            font-size: larger;
            margin-bottom: 35px;
            margin-top: 35px;
            background-color: lightgreen;
            color: red;
        }
    
 
    
        function myFunc() {
            var element = document.getElementById(
                            "to_be_styled");
 
            element.classList.add("para", "second");
        }
    

 

     
Hello there.
 
     
    
        Welcome to GeeksForGeeks.
    
 
     
     
Like our platform?
 
     
    
        Click Me to see Effects
    

 

输出：
点击前：

点击后：

支持的浏览器：

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