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

在HTML中可以应用多个类到一个元素上，并且可以使用CSS来为它们添加样式。在本文中，我们将只涉及两个类的情况。但是，用于分配两个类的概念也可以扩展到多个类。

在HTML中为元素分配类： 类的名称可以写在“class”属性中。

注意： 类的名称必须以空格分隔。

语法：

<tag_name class="class_1 class_2">

然后可以使用“ .class_1 ”和“ .class_2 ”分别为这些类设置样式，或者只能对包含这两个类的元素进行样式设置，使用 “ .class_1.class_2 “。

单独设置样式： 以下示例中的两个类都被单独设置了样式。

语法：

<style>
    .class_1{
        /* some styles */
    }

    .class_2{
        /* some styles */
    }
</style>

示例： 在这个示例中，我们将在HTML中的一个元素上应用两个CSS类。

<style> 
    .para { 
        font-size: larger; 
        margin-bottom: 35px; 
        background-color: lightgreen; 
    } 
      
    .second_para { 
        color: red; 
    } 
</style> 
  
<body> 
    <p class="para"> 
        Hello there. 
    </p> 
  
  
    <p class="para second_para"> 
        Welcome to GeeksForGeeks. 
    </p> 
  
</body>

输出：

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

包含这两个类的元素的样式： 只有包含这两个类的元素才会被应用样式。包含其中一个或零个类的其他元素不会被应用样式。

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

语法：

<style>
    .class_1.class_2{
        /* some styles */
    }
</style>

示例： 此示例展示了上述解释方法的使用。

<style> 
    .para.second { 
        font-size: larger; 
        margin-bottom: 35px; 
        margin-top: 35px; 
        background-color: lightgreen; 
        color: red; 
    } 
</style> 
  
<body> 
    <p class="para"> 
        Hello there. 
    </p> 
  
    <p class="para second"> 
        Welcome to GeeksForGeeks. 
    </p> 
  
  
    <p class="second"> 
        Like our platform? 
    </p> 
</body>

输出：

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

使用JavaScript分配类： 我们也可以使用JavaScript添加和删除类。我们将使用标签的 “classList” 属性，它会以DOMTokenList对象的形式返回类名。我们将使用 “add()” 方法动态地向元素添加多个类。

add(class_1, class_2, …) ：用于在HTML内部给元素分配一个类或多个类。
在这个示例中，我们将类“para”和“second”分配给具有ID“to_be_styled”的段落。样式技术与上述描述相同。

示例： 这个示例展示了上述方法的使用。

<style> 
    .para.second { 
        font-size: larger; 
        margin-bottom: 35px; 
        margin-top: 35px; 
        background-color: lightgreen; 
        color: red; 
    } 
</style> 
  
<script> 
    function myFunc() { 
        var element = document.getElementById( 
                        "to_be_styled"); 
      
        element.classList.add("para", "second"); 
    } 
</script> 
  
<body> 
    <p>Hello there.</p> 
  
    <p id="to_be_styled"> 
        Welcome to GeeksForGeeks. 
    </p> 
  
    <p>Like our platform?</p> 
  
    <button onclick="myFunc()"> 
        Click Me to see Effects 
    </button> 
</body>

输出：

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