HTML 类属性 - 菜鸟教程

在CSS中使用class属性

class属性为HTML元素指定一个或多个类名。 CSS和JavaScript可以使用类名来为具有指定类名的元素执行某些任务。在CSS中，要选择具有特定类的元素，写一个点（.）字符，后跟类的名称：例如：在CSS中使用class属性

<style>
          .lang {
              background-color: green;
              color: white;
              padding: 10px;
          } 
          </style>

          <h2 class="lang">Java</h2>
          <p>PHP是世界上最好的语言吗？</p>

          <h2 class="lang">PHP</h2>
          <p>PHP是世界上最好的语言。</p>

          <h2 class="lang">Python</h2>
          <p>PHP是世界上最好的语言，呵呵。</p>

尝试一下

结果：

Java

PHP是世界上最好的语言吗？

PHP

PHP是世界上最好的语言。

Python

PHP是世界上最好的语言，呵呵。

提示： class属性可用于任何HTML元素。注意：类名区分大小写！提示：可以在CSS教程学习更多的CSS知识。

在JavaScript中使用class属性

JavaScript可以使用以下getElementsByClassName()方法访问具有指定类名的元素：例如：在JavaScript中使用class属性

<h2 class="lang-one">Java</h2>
        <p>PHP是世界上最好的语言吗？</p>

        <h2 class="lang-one">PHP</h2>
        <p>PHP是世界上最好的语言。</p>

        <h2 class="lang-one">Python</h2>
        <p>PHP是世界上最好的语言，呵呵。</p>

        <button type="button" onclick="myFunction();">改变文本颜色</button>

        <script>
        function myFunction() {
        var x = document.getElementsByClassName("lang-one");
        for (var i = 0; i < x.length; i++) {
          i%2 == 0 ? x[i].style.color = 'red' : x[i].style.color = 'green';
        }
        }
        </script>

尝试一下

提示：可以在JavaScript教程学习更多的CSS知识。

一个元素多个类

HTML元素可以有多个类名，每个类名必须用空格分隔。

<style>
          .lang2{
            color: green;
          }

          .other{
            font-size: 28px;
          }
        </style>
        <h2 class="lang2 other">PHP</h2>
        <h2 class="lang2">Java</h2>
        <h2 class="lang2">Python</h2>

尝试一下

在上面的示例中，第一个<h2>元素属于“lang2”类和“other”类。

不同元素同一个类

不同元素可以具有相同的类名，从而共享相同的样式：

<style>
          .lang3{
            color: green;
            font-weight:bold;
          }

         
        </style>
        <h2 class="lang3">PHP</h2>
        <p class="lang3">Java</p>

尝试一下

在上面的示例中，h2和p元素同时共享“lang3”类。