HTML 类

使用class属性

class 属性为HTML元素指定一个或多个类名。

CSS 和 JavaScript 可以使用类名来为具有指定类名的元素执行某些任务。

在 CSS 中，要选择具有特定类的元素，应写成点(.)字符后面跟着类名：

具体参考以下示例:

示例：

使用CSS为类名为”city”的所有元素设置样式：

<style> 
.city { 
    background-color: green; 
    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元素。
注意:类名区分大小写！
提示:您可以在我们的 CSS 教程中学习更多关于CSS的知识。

在JavaScript中使用class(类)

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

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

亲自试一试

提示:想了解更多关于JavaScript的知识，可以在 JavaScript教程中学习 JavaScript

示例

具有类名”city”, 的样式元素，以及具有类名”main”的样式元素：

<h2 class="city main">London</h2> 
<h2 class="city">Paris</h2> 
<h2 class="city">Tokyo</h2> 

亲自试一试

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

同一类，不同的标签

不同的标签，例如 <h2>和 <p>,可以具有相同的类名，从而共享相同的样式：

示例

<h2 class="city">重庆</h2> 
<p class="city">是我国人口最多的城市。</p> 

亲自试一试