锘??xml version="1.0" encoding="utf-8" standalone="yes"?>
瀵逛簬div
1.錛圛E嫻忚鍣級(jí)white-space:normal; word-break:break-all;榪欓噷鍓嶈呮槸閬靛驚鏍囧噯銆?/strong>
#wrap{white-space:normal; width:200px; }鎴栬?wrap{word-break:break-all;width:200px;}eg.<div id="wrap">ddd1111111111111111111111111111111111</div>
鏁堟灉錛氬彲浠ュ疄鐜版崲琛?/p>
2.錛團(tuán)irefox嫻忚鍣級(jí)white-space:normal; word-break:break-all;overflow:hidden;鍚屾牱鐨凢F涓嬩篃娌℃湁寰堝ソ鐨勫疄鐜版柟娉曪紝鍙兘闅愯棌鎴栬呭姞婊氬姩鏉★紝褰撶劧涓嶅姞婊氬姩鏉℃晥鏋滄洿濂斤紒
#wrap{white-space:normal; width:200px; overflow:auto;}鎴栬?wrap{word-break:break-all;width:200px; overflow:auto; }eg.<div id="wrap">ddd1111111111111111111111111111111111111111</div>
鏁堟灉錛氬鍣ㄦ甯革紝鍐呭闅愯棌
瀵逛簬table
1. (IE嫻忚鍣?浣跨敤鏍峰紡table-layout:fixed錛?/strong>
eg.
<style>.tb{table-layout:fixed}</style><table class="tbl" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
鏁堟灉錛氬彲浠ユ崲琛?/p>
2.(IE嫻忚鍣?浣跨敤鏍峰紡table-layout:fixed涓巒owrap
eg.
<style>.tb {table-layout:fixed}</style><table class="tb" width="80"><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
鏁堟灉錛氬彲浠ユ崲琛?/p>
3. (IE嫻忚鍣?鍦ㄤ嬌鐢ㄧ櫨鍒嗘瘮鍥哄畾td澶у皬鎯呭喌涓嬩嬌鐢ㄦ牱寮弔able-layout:fixed涓巒owrap
<style>.tb{table-layout:fixed}</style><table class="tb" width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
鏁堟灉錛氫袱涓猼d鍧囨甯告崲琛?/p>
3.(Firefox嫻忚鍣?鍦ㄤ嬌鐢ㄧ櫨鍒嗘瘮鍥哄畾td澶у皬鎯呭喌涓嬩嬌鐢ㄦ牱寮弔able-layout:fixed涓巒owrap,騫朵笖浣跨敤div
eg.
<style>.tb {table-layout:fixed}.td {overflow:hidden;}</style><table class=tb width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
榪欓噷鍗曞厓鏍煎搴︿竴瀹氳鐢ㄧ櫨鍒嗘瘮瀹氫箟
鏁堟灉錛氭甯告樉紺猴紝浣嗕笉鑳芥崲琛岋紙娉細(xì)鍦‵F涓嬭繕娌℃湁鑳戒嬌瀹瑰櫒鍐呭鎹㈣鐨勫ソ鏂規(guī)硶錛屽彧鑳界敤overflow灝嗗鍑虹殑鍐呭闅愯棌錛屼互鍏嶅獎(jiǎng)鍝嶆暣浣撴晥鏋滐級(jí)濡傛灉欏甸潰鍒朵綔鐨勬椂鍊欓亣鍒板畾涔夌殑CSS涓嶈搗浣滅敤錛屼綘鍙兘閬囧埌浜?jiǎn)CSS浼樺厛綰х殑闂銆侰SS浼樺厛綰у湪CSS閲岀畻鏄瘮杈冮毦鎳傜殑閮ㄥ垎錛屼笉鍚屾潈閲嶇殑CSS閫夋嫨鍣ㄦ湁鍙兘灝辨槸浣犲嚭閿欑殑鍘熷洜錛屾墍浠ヤ綔涓洪〉闈㈠紑鍙戜漢鍛樺繀欏諱簡(jiǎn)瑙SS浼樺厛綰х壒鎬с?/p>
CSS浼樺厛綰х壒鎬ф榪幫細(xì)
1. 閫氳繃浼樺厛綰ц綆楋紝璁╂祻瑙堝櫒鍏堣В鏋愬摢鏉SS瑙勫垯銆?br />
2. 浼樺厛綰х壒鎬х粡甯告槸浣犲畾涔夌殑CSS瑙勫垯涓嶈搗浣滅敤鐨勫師鍥狅紝铏界劧浣犺涓鴻搗浜?jiǎn)浣滅敤锛岀劧鑰屽嵈涓嶆槸銆?br />
3. 姣忎釜閫夋嫨鍣ㄩ兘鏈夊畠鐨勪紭鍏堢駭灞傛銆?br />
4. 濡傛灉涓や釜瑙勫垯鍚屾椂浣滅敤浜庝竴涓厓绱狅紝浼樺厛綰ч珮鐨勮幏鑳溿?br />
5.浼樺厛綰х壒鎬у彲浠ュ垎涓哄洓綾伙細(xì)inline styles, IDs, classes+attributes and elements.
6.鑻辨枃濂界殑鍙互鐪嬩笅榪欎袱綃囨枃绔狅紝 CSS Specificity Wars鍜?a >CSS Specificity for Poker Players
7.濡傛灉閫夋嫨鍣ㄦ湁涓や釜絳夌駭鐩稿悓鐨勫鹼紝鍚庨潰鐨勫間細(xì)瑕嗙洊鍓嶉潰鐨勫箋?br />
8.濡傛灉閫夋嫨鍣ㄦ湁絳夌駭涓嶅悓鐨勫鹼紝浠ョ瓑綰ч珮鐨勭畻錛屾瘮濡?important銆?br />
9.鎷ユ湁鏇村浼樺厛鐗規(guī)ч夋嫨鍣ㄧ殑瑙勫垯鏇村叿鏈変紭鍏堢壒鎬с?br />
10.鍚庨潰鐨勮鍒欒偗瀹氫細(xì)瑕嗙洊鍓嶉潰鐩稿悓鐨勮鍒欍?br />
11.鍐呭祵鐨凜SS瑙勫垯浼樺厛綰х壒鎬ф渶楂樸?br />
12.CSS鏂囦歡閲岋紝ID鐨勪紭鍏堢駭鐗規(guī)ф渶楂樸?br />
13.鎯寵澧炲姞浼樺厛綰э紝鍙互浣跨敤ID銆?br />
14.class姣攅lement綰у埆楂樸?br />
15.閫夋嫨鍣ㄥ垎涓哄洓涓駭鍒紝璁$畻鏂瑰紡 0,0,0,0銆?br />
16.鎺ㄨ崘涓涓狢SS浼樺厛綰ц綆楀櫒錛?a >CSS Specificity Calculator.銆?/p>
浠涔堟槸浼樺厛綰х壒鎬?/strong>
浼樺厛綰ц綆楁槸涓轟簡(jiǎn)鍐沖畾嫻忚鍣ㄨВ鏋愬摢鏉¤鍒欍?#8220;浼樺厛綰х壒鎬х殑鏉冮噸鍏崇郴CSS鐨勬樉紺恒?#8221;Understanding Specificity 錛堟槑鐧戒紭鍏堢駭鐗規(guī)э級(jí)銆?/p>
閫夋嫨鍣ㄧ殑浼樺厛綰х壒鎬у喅瀹氫簡(jiǎn)鍚屼竴涓厓绱犲鏉¤鍒欎笅鍝潯瑙勫垯瀹炴柦銆?a >Selector Specificity 錛堥夋嫨鍣ㄤ紭鍏堢駭錛夈?/p>
姣忎釜閫夋嫨鍣ㄩ兘鏈変紭鍏堢駭錛屼袱涓夋嫨鍣ㄤ綔鐢ㄤ笌鍚屼竴涓厓绱狅紝浼樺厛綰ч珮鐨勮幏鑳溿?/p>
CSS浼樺厛綰х駭鍒細(xì)
1. Inline styles 鍐呭祵欏甸潰鐨凜SS鏍峰紡錛屾瘮濡?lt;h1 style=”color:#000″></h1>
2.IDs 姣斿#myid
3.Classes, attributes and pseudo-classes 姣斿 .classes, [attributes]:hover, :focus
4.Elements and pseudo-elements 姣斿 div,p,h1,鍖呮嫭:before鍜?after
鎬庢牱嫻嬮噺浼樺厛綰э紵
鍐呭祵鐨勪負(fù)1000錛孖D涓?00錛?strong>Classes, attributes and pseudo-classes涓?0錛?strong>Elements and pseudo-elements 涓?銆?/p>
body #content .data img:hover 榪欓噷鐨勭壒鎬у間負(fù) 0,1,2,2
涓嬮潰榪欏紶鏄熺悆澶ф垬鐨勫浘鐗囦篃璁歌兘甯姪浣犺蹇嗭細(xì)
鏉ユ祴璇曚笅鍚?/strong>
1 | * { } | 0 |
3 | li:first-line { } | 2 (one element, one pseudo-element) |
5 | ul ol+li { } | 3 (three elements) |
7 | ul ol li.red { } | 13 (one class, three elements) |
9 | style=”” | 1000 (one inline styling) |
11 | div p { } | 2 (two HTML selectors) |
13 | div p.sith { } | 12 (two HTML selectors and a class selector) |
15 | body #darkside .sith p { } | 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) |
瀹為檯緇忛獙錛?/strong>
1. 浣跨敤LVHA瀹氫箟閾炬帴錛屽嵆link-visited-hover-active錛屽弬鑰僛Link Specificity]
2. 濡傛灉涓嶆槸涓轟簡(jiǎn)鍏煎嫻忚鍣紝鏈濂戒笉瑕佷嬌鐢?!important
3. 浣跨敤ID璁╃壒鎬ф洿鍏蜂綋錛屾瘮濡俛.high鍐欐垚 ul#blog li a.high
CSS宸ュ叿涓庤祫 鑻辨枃濂界殑鍘葷湅涓?/p>
CSS Specificity for Poker Players
CSS specificity calculator
Understanding Specificity Tutorial
Cascade Inheritance: Specificity
CSS 2.1 Selectors Explained
CSS Specificity Bugs in IE
CSS Structure and Rules
Specificity