数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法律学如何对一个元素应用两个 CSS 类？
我们可以通过使用 class 属性并用空格分隔每个类来对单个元素应用多个 CSS 类。有两种方法可以将两个 CSS 类应用于单个元素 -
使用 Class 属性应用两个类
用于设置单个类的 class 属性也可用于设置多个类 -
<div class="class1 class2">This element has two CSS classes applied to it</div>
示例
让我们看这个例子 -
<!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>
</body>
</html>
使用 JavaScript 应用两个类
给定一个具有 id ‘paragraph’ 的 p 标签，我们想对其应用这些类。classList 是一个属性，add() 方法用于添加类。在这种情况下，我们添加了两个类，即 one 和 two -
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
以下是 .one 和 .two 的样式 -
<style>
.one {
color: blue;
}
.two {
font-size: 20px;
}
</style>
示例
让我们看这个例子 -
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.one {
color: blue;
}
.two {
font-size: 20px;
}
</style>
</head>
<body>
<p id = 'paragraph'>Demo content</p>
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
</body>
</html>
更新于： 2023 年 11 月 16 日
2K+ 浏览量
广告