Mozilla Firefox 建議的CSS書寫順序

mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //顯示屬性 * display * list-style * position * float * clear //自身屬性 * width * height * margin * padding * border * background //文本屬性 * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * 整理了一下自己寫CSS時的順序，跟大家分享下。 下表順序爲從上到下，從左到右： ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height overflow || clip margin : margin-top || margin-right || margin-bottom || margin-left padding : padding-top || padding-right || padding-bottom || padding-left outline : outline-color || outline-style || outline-width border background : background-color || background-image || background-repeat || background-attachment || background-position color font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar text-overflow text-align text-indent line-height white-space vertical-align cursor .class{ background-color:# FFFF00;/*所有浏覽器*/ * background-color:#00FF00;/*IE*/ _ background-color:# 00FFFF;/*IE6*/ } @media all and(min-width:0){ .class{ background-color:#FF00FF; /*Opera */ } }/*只有Opera識別*/ @media all and (min-width:0){ .class{ background-color:#FF00FF; /*Opera和Sa */ html* .class{ background-color:# 808080; /*Sa*/ } }} 注：這裏所指代的 Safari 和 Opera 一般爲最新版本。 Chrome的hack寫法: body:nth-of-type(1) p{color:#333333;} 2、僅 Firefox 3 和 IE7 識別的 Hack selector, x:-moz-any-link, x:default { /* Firefox 3 and IE7 rules here */ } 可簡單解決IE與FF之間的兼容問題（保持FF,IE7,IE的順序），但這種方式貌似對加載有一定的影響 ！ Update2007-12-31 NND快被Opera個丫的折騰崩潰了: .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 對于 IE8 beta1 可以嘗試下面的 Hack： /*/ selector { … } /**/ 此規則僅 IE8 beta1 識別，而其他 A-grade 浏覽器都不識別