多个类可以应用于 HTML 中的单个元素,并且可以使用 CSS 对其进行样式设置。在本文中,我们将只使用两个类。但是用于分配两个类的概念也可以扩展到多个类。
为 HTML 中的元素分配类:
类的名称可以写在“class”属性中。
注意:类的名称必须以空格分隔。
句法:
然后可以使用“ .class_1 ”和“ .class_2 ”单独设置类的样式,或者可以仅使用“ .class_1.class_2 ”设置包含两个类的元素的样式。
单独设置样式:以下示例中的两个类都是单独设置样式的。
句法:
例子:
How to apply two CSS classes
to a single element ?
Hello there.
Welcome to GeeksForGeeks.
输出:
在上面的示例中,类“para”的样式应用于两个段落,而类“second_class”的样式仅应用于第二个段落。
包含两个类的样式元素:包含两个类的元素将仅被样式化。包含两个类中的一个或零个的所有其他元素将不会被设置样式。
注意:在 CSS 选择器中,类名之间没有空格。
句法:
例子:
How to apply two CSS classes
to a single element?
Hello there.
Welcome to GeeksForGeeks.
Like our platform?
输出:
在上面的示例中,样式仅应用于第二个段落,因为它是包含这两个类的唯一标记。
使用 JavaScript 分配类:我们还可以使用 JavaScript 添加和删除类。我们将使用标签的“classList”属性,该标签将类名作为 DOMTokenList 对象返回。我们将使用“add()”方法动态地向一个元素添加多个类。
add(class_1, class_2, …):用于为 HTML 中的元素分配一个类或多个类。
在这个例子中,我们将把类“para”和“second”分配给 ID 为“to_be_styled”的段落。造型技术与上述相同。
例子:
How to apply two CSS classes
to a single element?
Hello there.
Welcome to GeeksForGeeks.
Like our platform?
输出:
点击前:
点击后: