这是类名选择器的介绍
下面是一个简单的类名选择器,代码如下:
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多类名选择器</title> <style> .pink { color: pink; background-color: bisque; }
.pal { color: palevioletred; }
.white { color: white; }
.box { width: 520px; height: 200px; font-size: 60px; } </style> </head>
<body> <!-- <div style="">你干嘛</div> <div style="哎呦</div> <div style="鸡哥</div>--> <div class="pink box">木更老婆</div> <div style="background-color: black;" class="pal box">神子老婆</div> <div style="background-color: purple;" class="white box">影宝</div> </body>
</html>
代码运行效果如下:
![](/i/l/?n=23&i=blog/2990445/202301/2990445-20230105155426625-1878183485.png)
多类名选择器在开发中的使用场景是这样的
![](/i/l/?n=23&i=blog/2990445/202301/2990445-20230105155617000-1090711535.png)