css实例004--类选择器多类名

最新推荐文章于 2023-12-01 16:32:15 发布

dododododoooo

最新推荐文章于 2023-12-01 16:32:15 发布

阅读量400

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/dododododoooo/article/details/118379743

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css实例004–类选择器多类名

在使用类选择器时,可以将相同的属性放在同一个类选择器中
在调用时可以通过空格调用多个类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        /* 公共属性 */
        .box {
            width: 100px;                       /*宽度是100像素*/
            height: 100px;                      /*高度是100像素*/
            font-size: 35px;                    /*字号为35*/
        }

        /* 红色的盒子 */
        .red {
            background-color: red;
        }

        /* 绿色的盒子 */
        .green {
            background-color: green;
        }

    </style>

</head>
<body>
    <h2>
        div 盒子
    </h2>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>
</html>

通过空格调用同时调用了 red 和 box 两个类选择器

dododododoooo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实例004--类选择器多类名

css实例004–类选择器多类名在使用类选择器时,可以将相同的属性放在同一个类选择器中在调用时可以通过空格调用多个类选择器<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫

专栏目录