CSS樣式名之間空格,無空格和大於號的區別
阿新 • • 發佈:2018-02-27
式表 大於號 {} explore 包含 意思 今天 中間 順序
今天看代碼,練習demo時發現css樣式表裏面 .layout.float .left{} 的寫法有一些疑惑,查詢資料後得到的理解如下:
CSS 多類選擇器
通過把多個類選擇器鏈接在一起,僅可以選擇同時包含這些類名的元素(類名的順序不限)
.layout.float 兩者之間無空格
例如:
.layout.float { color: red; }
<div class="layout float">被選擇的元素</div>
註意:在 IE7 之前的版本中,不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。
CSS 後代選擇器
.layout .float 中間用空格隔開,表示後代選擇器,選擇的是.layout內的.float (兩個元素之間的層次間隔可以是無限的)
.layout .float{ color: orange; }
<div class="layout"> <div class="float">被選擇的元素</div> </div>
CSS 子元素選擇器
.layout > .float 中間是大於號,表示元素的子元素
.layout > .float{ color: blue; }
<div class="layout"> <div class="float">被選擇的元素</div> <div> <div class="float">沒有被選擇的元素</div> </div> </div>
所以 .layout.float .left{} 的意思是類名包含“layout float”的元素,其後代類名包含“left”的元素被選中。
CSS樣式名之間空格,無空格和大於號的區別