HTML多个class|极客教程

HTML多个class

在HTML中，一个元素可以同时拥有多个class，这使得我们可以更灵活地为元素添加样式。在本文中，我们将详细介绍如何在HTML中使用多个class，并提供一些示例代码来帮助读者更好地理解这个概念。

基本语法

在HTML中，我们可以为一个元素指定多个class，只需要在class属性中用空格分隔不同的class名称即可。例如：

<div class="class1 class2 class3"></div>

在上面的例子中，<div>元素同时拥有class1、class2和class3这三个class。

示例代码

示例1：同时应用多个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Classes Example</title>
    <style>
        .class1 {
            color: red;
        }
        .class2 {
            font-weight: bold;
        }
        .class3 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="class1 class2 class3">This is a div with multiple classes.</div>
</body>
</html>

Output:

HTML多个class

在上面的示例中，我们为<div>元素同时应用了class1、class2和class3这三个class，分别设置了不同的样式。

示例2：使用多个class为不同元素添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Classes Example</title>
    <style>
        .class1 {
            color: blue;
        }
        .class2 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="class1">This is a paragraph with class1.</p>
    <p class="class2">This is a paragraph with class2.</p>
    <p class="class1 class2">This is a paragraph with class1 and class2.</p>
</body>
</html>