css 元素满足多个类名才显示样式、满足多个类名、vue代码同时满足多个类名才有效果
发布于 1 年前 作者 webdashen 828 次浏览 来自 分享

有时候我们会遇到一个元素必须同时满足多个类名的时候,才展示的样式,这个时候可以用多次点语法即可 比如:div.xx1.xx2 那么这个元素就是**<div class="xx1 xx2"></div>** 这样同时满足有2个类名xx1和xx2才会显示样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box1 {
            background-color: red;
        }
        div.box2 {
            background-color: green;
        }
        div.box.box2 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!-- 只有box2字体是红色的 -->
    <div class="box box2">box2</div>
</body>
</html>
1 回复
回到顶部