html控件中设立两个样式渲染

html控件中设置两个样式渲染

如果一个控件中要设置添加多个样式，CSS查找方式是

.a_class.b_class......

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一个空间中的两个样式</title>
</head>
<style>

    div{
        border: 1px solid blue;
        width: 100px;
        line-height: 25px;
        margin-top: 10px ;
    }
    .current{
        color: blue;
    }

    .active{
        color: green;
    }

    .current.active{
        color: red;
    }

    .active.current{
        color: #ffff00;
    }

</style>
<body >

    <div class="current">
        current
    </div>

    <div class="active">
        active
    </div>
<!-- active current样式不分前后，都是.current.active样式-->
    <div class="active current">
        active current
    </div>

    <div class="current active">
        current active
    </div>

</body>
</html>

html控件中设立两个样式渲染

相关推荐