HTML class 属性

使用 class 属性指定标签类名

HTML class属性用于具有相同类名的元素定义相同的样式。

因此,具有相同class属性的所有HTML元素将具有相同的格式和样式。

这里我们有三个指向相同类名的<div>元素:

实例

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color: black;
    color: white;
    margin: 20px;
    padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>伦敦</h2>
  <p>伦敦是英格兰的首都.</p>
</div>

<div class="cities">
  <h2>巴黎</h2>
  <p>巴黎是法国的首都.</p>
</div>

<div class="cities">
  <h2>东京</h2>
  <p>东京是日本的首都.</p>
</div>

</body>
</html>

结果:

伦敦

伦敦是英格兰的首都。

巴黎

巴黎是法国的首都。

东京

东京是日本的首都。

运行 »


在内联元素上使用class属性

HTML class属性也可用于内联元素:

实例

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>我是 <span class="note">重要</span> 的标题</h1>
<p>这是一些 <span class="note">重要</span> 的文字.</p>

</body>
</html>
运行 »

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

注意:类名区分大小写!

提示:您可以在我们的CSS教程中学习更多关于CSS的知识。


选择具有特定class的元素

在CSS中,要选择具有特定类的元素,请编写句点(.)字符,后跟class的名称(.class):

实例

使用CSS class名为“city”的所有元素设置样式:

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

<h2 class="city" >伦敦</h2>
<p>伦敦是英格兰的首都.</p>

<h2 class="city" >巴黎</h2>
<p>巴黎是法国的首都.</p>

<h2 class="city" >东京</h2>
<p>东京是日本的首都.</p>

结果:

伦敦

伦敦是英格兰的首都.

巴黎

巴黎是法国的首都.

东京

东京是日本的首都.

运行 »

多个类(class)

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

实例

具有类名“city”的样式元素,以及具有类名“main”的样式元素:

<h2 class="city main">伦敦</h2>
<h2 class="city">巴黎</h2>
<h2 class="city">东京</h2>
运行 »

在上面的示例中,第一个<h2>元素属于“city”类和“main”类。


不同的标签可以使用同一class

不同的标签,如<h2><p> ,可以具有相同的类名,从而使用相同的样式:

实例

<h2 class="city">巴黎</h2>
<p class="city">巴黎是法国的首都</p>
运行 »

在JavaScript中获取类(class)

可以通过JavaScript来获取类名,根据指定类名的元素执行某些操作。

JavaScript可以使用getElementsByClassName()方法访问具有指定类名的元素:

实例

当用户单击按钮时,隐藏所有具有类名“city”的元素:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city") ;
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
运行 »

提示:HTML JavaScript章节或 JavaScript教程中学习 JavaScript