“HTML class 属性”的版本间差异

2022年8月6日 (六) 08:55的版本

class 属性用于指定 HTML 元素的类。

多个 HTML 元素可以共享同一个类。

使用类属性

该 class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。

在下面的示例中，我们有三个 <div> 元素的 class 属性值为“city”。根据head 部分中的样式定义，所有三个 <div> 元素的样式都将相同： .city

示例

<!DOCTYPE html>
    <html>

    <head>
        <style>
            .city {
                background-color: tomato;
                color: white;
                border: 2px solid black;
                margin: 20px;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <div class="city">
            <h2>London</h2>
            <p>London is the capital of England.</p>
        </div>
        <div class="city">
            <h2>Paris</h2>
            <p>Paris is the capital of France.</p>
        </div>
        <div class="city">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan.</p>
        </div>
    </body>

    </html>

在下面的示例中，我们有两个 <span> 元素的 class 属性值为“note”。根据head 部分中的样式定义，这两个 <span> 元素的样式将相同： .note

示例

<!DOCTYPE html>
    <html>

    <head>
        <style>
            .note {
                font-size: 120%;
                color: red;
            }
        </style>
    </head>

    <body>
        <h1>My <span class="note">Important</span> Heading</h1>
        <p>This is some <span class="note">important</span> text.</p>
    </body>

    </html>

提示：该 class 属性可用于任何HTML 元素。

注意：类名区分大小写！

提示：您可以在我们的CSS 教程中了解更多关于 CSS 的信息。

类的语法

创建一个类；写一个句点 (.) 字符，后跟一个类名。然后，在花括号 {} 中定义 CSS 属性：

示例

创建一个名为“city”的类：

<!DOCTYPE html>
    <html>

    <head>
        <style>
            .city {
                background-color: tomato;
                color: white;
                padding: 10px;
            }
        </style>
    </head>

    <body>
        <h2 class="city">London</h2>
        <p>London is the capital of England.</p>
        <h2 class="city">Paris</h2>
        <p>Paris is the capital of France.</p>
        <h2 class="city">Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
    </body>

    </html>

多个类

HTML 元素可以属于多个类。

要定义多个类，请用空格分隔类名，例如

。该元素将根据所有指定的类进行样式设置。

在下面的例子中，第一个 <h2> 元素既属于 city 类也属于 main 类，并且会从这两个类中获取 CSS 样式：

示例

<h2 class="city main">北京</h2>
<h2 class="city">上海</h2>
<h2 class="city">成都</h2>

@@ 第106行： / 第106行： @@
 在下面的例子中，第一个''' <nowiki><h2></nowiki> '''元素既属于''' <nowiki> city</nowiki> '''类也属于''' <nowiki>main</nowiki> '''类，并且会从这两个类中获取 CSS 样式：
-<sample title="" hererun="s">
+<sample title="" desc="" run="m1">
+<h2 class="city main">北京</h2>
+<h2 class="city">上海</h2>
+<h2 class="city">成都</h2>
+</sample>
+<run title="" name="m1">
     <!DOCTYPE html>
 <html>
@@ 第124行： / 第130行： @@
 <body>
-<h2>Multiple Classes</h2>
+<h2>多个class</h2>
-<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>
+<p>这里有两个class， main和city，main会被居中显示</p>
-<h2 class="city main">London</h2>
+<h2 class="city main">北京</h2>
-<h2 class="city">Paris</h2>
+<h2 class="city">上海</h2>
-<h2 class="city">Tokyo</h2>
+<h2 class="city">成都</h2>
 </body>