CSS一个元素同时使用多个类选择器（class selector）
生活随笔
收集整理的這篇文章主要介紹了
CSS一个元素同时使用多个类选择器（class selector）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
CSS類選擇器參考手冊
一個(gè)元素同時(shí)使用多個(gè)類選擇器
CSS中類選擇器用點(diǎn)號表示。實(shí)際項(xiàng)目中一個(gè)div元素為了能被多個(gè)樣式表匹配到（樣式復(fù)用），通常div的class中由好幾段組成，如<div class="user login">能被.user和.login兩個(gè)選擇器選中。如果這兩個(gè)選擇器中有相同的屬性值，則該屬性值先被改為.user中的值，再被改為.login中的值，即重復(fù)的屬性以最后一個(gè)選擇器中的屬性值為準(zhǔn)。測試如下：
<style> .user {font-size: 30px;background-color:red; } .login {background-color:blue; } </style> </head> <body><div class='user'>你好。這是一個(gè) DIV 元素，class='user'。</div> <div class='login'>你好。這是一個(gè) DIV 元素，class='login'。</div> <div class='user login'>你好。這是一個(gè) DIV 元素，class='user login'。</div></body>第三個(gè)div元素的背景顏色以.login中的為準(zhǔn)，效果如下圖：
CSS類選擇器的匹配規(guī)則
CSS中多個(gè)類選擇器之間有沒有空格是怎樣的匹配規(guī)則？如.user.login和.user .login（中間有空格）的區(qū)別？
直接上例子。電商項(xiàng)目中的導(dǎo)航欄，包括用戶的登錄/注冊/注銷，以及購物車等信息。
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><!-- 右側(cè)的導(dǎo)航鏈接 --><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">關(guān)于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; }/* 導(dǎo)航鏈接部分 */ .nav .nav-list{float: right; } .nav .nav-list .nav-item{display: inline-block;margin-left: 5px; }觀察上面代碼的運(yùn)行結(jié)果可知：
- .nav .user（中間有空格）匹配到class含有nav的元素下面的class含有user的元素，是<span class="user not-login">和<span class="user login">。
- .user.login（中間沒有空格）匹配到class同時(shí)含有user和login的元素，是<span class="user login">。
- .nav .user.login（.nav和.user中間有空格，.user和.login中間沒有空格）匹配到class含有nav的元素下面的class同時(shí)含有user和login的元素，是<span class="user login">。
一個(gè)更小的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>類選擇器</title> <style> .user.login /* 匹配同時(shí)包含user和login的元素 */ {font-size: 35px; }.user .login{ /* 匹配含user下的含login的元素 */background-color:green; }</style> </head> <body><div class='user'>你好。這是一個(gè) DIV 元素，class='user'。<div class='login'>你好。這是一個(gè) DIV 元素，class='user login'。</div> </div> <div class='login'>你好。這是一個(gè) DIV 元素，class='login'。</div> <div class='user login'>你好。這是一個(gè) DIV 元素，class='user login'。</div></body> </html>?
?
總結(jié)
以上是生活随笔為你收集整理的CSS一个元素同时使用多个类选择器（class selector）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 原油期货开户需要什么条件？需要满足7大条
- 下一篇： 民生白条联名卡：给京东白条还款就用它