CSS一個元素同時使用多個類選擇器（class selector）
阿新 • • 發佈：2018-12-26
一個元素同時使用多個類選擇器
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>
