多类名选择器

mac2022-06-30  19

多类名选择器 语法:.类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} .类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......}标签调用的时候用: class = "类名1 类名2"

注意: 1)样式显示效果跟HTML元素中的类名先后顺序没有关系,爱CSS样式书写的上下顺序有关. 2)各个类名中间用空格隔开. 多类名选择器在后期布局比较复杂的情况下,还是较多使用的.

类选择器与ID选择器的区别:类选择是可以重复多次使用的,id只能使用一次.

 

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .font32{ font-size: 32px; } .font20{ font-size: 20px; } .colorRed{ color: red; } .colorGreen{ color: green; } </style> </head> <body> <div class="font32 colorRed">李白</div> <div class="font32 colorGreen">马可波罗</div> <div class="font20 colorRed">吕布</div> <div class="font20 colorGreen">橘佑京</div> </body> </html>

 

效果如下:

最新回复(0)