CSS 如何在一个元素上应用两个CSS类
我们可以通过使用class属性为一个元素应用多个CSS类,并在每个类之间用空格分隔。
方法
有两种方法可以在一个元素上应用两个CSS类,即
- 使用class属性
<div class="class1 class2">This element has two CSS classes applied to it</div>
- 使用JavaScript –
鉴于有一个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为扩展名的文件中。
-
在网络浏览器中打开该文件。