?
This document uses PHP Chinese website manual Release
E.myclass { sRules }
類選擇符(Class Selector)
不同于ID選擇符的唯一性,類選擇符可以同時(shí)定義多個(gè),如:
定義多個(gè)類:
.a { color: #f00; } .b { font-weight: 700; } <div class="a b">給某個(gè)div元素定義.a和.b兩個(gè)類</div>
注意,id選擇符不能在同個(gè)元素上定義多個(gè),比如id="a b"就是錯(cuò)誤的寫(xiě)法
類選擇符高級(jí)用法:多類選擇符
.a.b { color: #f00; } <div class="a b">多類選擇符使用方法</div>
此例命中同時(shí)擁有.a和.b兩個(gè)類的元素。需要注意的是IE6并不支持多類選擇符,如:.a.b{}將會(huì)被視為:.b{}
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
7.0+ |
不支持多類選擇符,形如:.a.b {}
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>class選擇符 (E.myclass)_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .title { font-size: 20px; } p.content { font-size: 13px; } .content.note { font-size: 30px; } </style> </head> <body> <h1 class="title">標(biāo)題</h1> <p class="content">正文內(nèi)容</p> <p class="content note">多類選擇符的使用</p> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例