在CSS中,如果想要同时应用多个class的样式,可以使用空格将class名分隔开来,例如:
.selector1 { color: red; } .selector2 { background-color: blue; } <div class="selector1 selector2">Hello World!</div>
上述代码中,使用了class为"selector1"和"selector2"的样式,分别为红色和蓝色背景色。使用空格隔开的class名,表示同时应用这两个class的样式。
如果想要优先应用其中某一个class的样式,可以使用!important关键字,例如:
.selector1 { color: red !important; } .selector2 { color: blue; } <div class="selector1 selector2">Hello World!</div>
上述代码中,使用了class为"selector1"和"selector2"的样式,分别为红色和蓝色字体色。由于在"selector1"样式中使用了!important,因此其样式会优先于"selector2"样式生效。
需要注意的是,class名之间的顺序不影响样式的应用。例如:
.selector1 { color: red; } .selector2 { background-color: blue; } <div class="selector2 selector1">Hello World!</div>
上述代码中,使用了class为"selector2"和"selector1"的样式,仍然分别为红色和蓝色背景色,与样式应用的顺序无关。