CSS 如何在一个元素上应用两个CSS类

CSS 如何在一个元素上应用两个CSS类

我们可以通过使用class属性为一个元素应用多个CSS类,并在每个类之间用空格分隔。

方法

有两种方法可以在一个元素上应用两个CSS类,即

  • 使用class属性
<div class="class1 class2">This element has two CSS classes applied to it</div>

鉴于有一个id为’paragraph’的p标签,我们想对其应用类-

<script>
   const paragraph = document.getElementById('paragraph');
   paragraph.classList.add('one');
   paragraph.classList.add('two');
</script>

例子

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Classes</title>
   <style>
      .one {
         color: red;
      }
      .two {
         font-size: 24px;
      }
   </style>
</head>
   <body>
      <p class = "one two">Using Class Attribute</p>
      <p id = 'paragraph'>Using JavaScript</p>
      <script>
         const paragraph = document.getElementById('paragraph');
         paragraph.classList.add('one');
         paragraph.classList.add('two');
      </script> 
   </body>
</html>

说明

  • 将上述代码保存在一个以.html为扩展名的文件中。

  • 在网络浏览器中打开该文件。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程