一个元素同时使用多个类选择器
CSS
中类选择器用点号表示。实际项目中一个div
元素为了能被多个样式表匹配到(样式复用),通常div
的class
中由好几段组成,如<div class="user login">
能被.user
和.login
两个选择器选中。如果这两个选择器中有相同的属性值,则该属性值先被改为.user
中的值,再被改为.login
中的值,即重复的属性以最后一个选择器中的属性值为准。测试如下:
<style>
.user
{
font-size: 30px;
background-color:red;
}
.login
{
background-color:blue;
}
</style>
</head>
<body>
<div class='user'>你好。这是一个 DIV 元素,class='user'。</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div>
</body>
第三个div
元素的背景颜色以.login
中的为准,效果如下图:
CSS类选择器的匹配规则
CSS
中多个类选择器之间有没有空格是怎样的匹配规则?如.user.login
和.user .login
(中间有空格)的区别?
直接上例子。电商项目中的导航栏,包括用户的登录/注册/注销,以及购物车等信息。
Html:
<div class="nav">
<div class="w">
<div class="user-info">
<span class="user not-login">
<span class="link js-login">登录</span>
<span class="link js-register">注册</span>
</span>
<span class="user login">
<span class="link-text">
欢迎,
<span class="username"></span></span>
<span class="link">退出</span>
</span>
</div>
<!-- 右侧的导航链接 -->
<ul class="nav-list">
<li class="nav-item">
<a class="link" href="./cart.html">
<i class="fa fa-shopping-cart"></i>
购物车(<span class="cart-cont">0</span>)
</a>
</li>
<li class="nav-item">
<a class="link" href="./order-list.html">我的订单</a>
</li>
<li class="nav-item">
<a class="link" href="./user-center.html">我的MMall</a>
</li>
<li class="nav-item">
<a class="link" href="./about.html">关于MMall</a>
</li>
</ul>
</div>
</div>
CSS:
.nav{
background: #eee;
height: 30px;
line-height: 30px;
}
/* 用户部分 */
.nav .user{
float: left;
}
.nav .user.login{
display: none;
}
.nav .user .link{
margin-right: 5px;
}
/* 导航链接部分 */
.nav .nav-list{
float: right;
}
.nav .nav-list .nav-item{
display: inline-block;
margin-left: 5px;
}
观察上面代码的运行结果可知:
.nav .user
(中间有空格)匹配到class
含有nav
的元素下面的class
含有user
的元素,是<span class="user not-login">
和<span class="user login">
。.user.login
(中间没有空格)匹配到class
同时含有user
和login
的元素,是<span class="user login">
。.nav .user.login
(.nav
和.user
中间有空格,.user
和.login
中间没有空格)匹配到class
含有nav
的元素下面的class
同时含有user
和login
的元素,是<span class="user login">
。
一个更小的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.user.login /* 匹配同时包含user和login的元素 */
{
font-size: 35px;
}
.user .login{ /* 匹配含user下的含login的元素 */
background-color:green;
}
</style>
</head>
<body>
<div class='user'>你好。这是一个 DIV 元素,class='user'。
<div class='login'>你好。这是一个 DIV 元素,class='user login'。</div>
</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div>
</body>
</html>