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

📅  最后修改于: 2021-11-06 11:35:23             🧑  作者: Mango

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

句法:

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

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


    .class_1{
        /* some styles */
    }
  
    .class_2{
        /* some styles */
    }

例子:

html


 

    
    
        How to apply two CSS classes
        to a single element ?   
    
 
    
        .para {
            font-size: larger;
            margin-bottom: 35px;
            background-color: lightgreen;
        }
 
        .second_para {
            color: red;
        }
    

 

    
        Hello there.
    
 
     
    
        Welcome to GeeksForGeeks.
    
 

 


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;
        }
    

 

    
        Hello there.
    
 
     
    
        Welcome to GeeksForGeeks.
    
 
     
    
        Like our platform?
    
 

 


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
    

 


输出:

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


    .class_1.class_2{
        /* some styles */
    }

例子:

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;
        }
    

 

    
        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浏览器
  • 火狐
  • 歌剧
  • 苹果浏览器