在CSS中,我们经常会想要同时应用多个类。这可以通过在元素的class属性中列出多个类名来实现。<div class= box red ></div&
在CSS中,我们经常会想要同时应用多个类。这可以通过在元素的class属性中列出多个类名来实现。
<div class="box red"></div>
在上面的例子中,div元素应用了两个类名:"box"和"red"。这意味着该元素将同时应用这两个类中所定义的样式。
注意,类名之间需要用空格隔开。如果没有空格,它们将被解析为一个单独的类名。
<div class="boxred"></div> //会被解析为一个单独的类名"boxred"
同时应用多个类十分方便,因为它们允许我们使用通用类和专业类。通用类是通常被多个元素使用的类,而专业类是只适用于一小部分元素的类。
下面是一个示例,使用通用类 .box 来定义所有盒子的基本样式,并使用专业类 .red 仅为红盒子定义红色背景。
.box { width: 100px; height: 100px; border: 1px solid #ccc; } .red { background-color: red; } <div class="box"></div> <div class="box red"></div> <div class="box"></div>
在上面的代码中,第一个和第三个盒子应用了基本类 .box,它们将不会有任何背景颜色。而第二个盒子同时应用了专业类 .red 和 .box,它将显示为一个红色背景的盒子。
粉丝
0
关注
0
收藏
0