@layerB,C,A;div{width:200px;楂樺害锛?00px锛泒@layerA{div{鑳屾櫙锛氳摑鑹诧紱}}@layerB{div{鑳屾櫙锛氱豢鑹诧紱}}@layerC{div{鑳屾櫙锛氭鑹诧紱}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑棣栧厛瀹氫箟浜咢layerB銆丆銆丄涓変釜@layer绾ц仈灞傘€傜劧鍚庡湪涓嬮潰鐨凜SS浠ｇ爜涓姞鍏ユ瘡涓眰鍙犲眰鐨凜SS浠ｇ爜锛屼絾鏄牱寮忕殑浼樺厛绾ф槸锛欰>C>B銆傛墍浠ユ渶缁堢殑div鐨勯鑹插€间负@layerA涓畾涔夌殑棰滆壊锛屽嵆钃濊壊:鑷虫锛孋SS@layer鐨勪綔鐢ㄥ氨鍙涓€鏂戜簡銆備娇鐢–SS@layer锛屾垜浠彲浠ュ皢涓嶅悓鐨凜SS妯″潡鍒掑垎鍒颁笉鍚岀殑@layers涓紝鍒╃敤椤哄簭鍙互寰堝ソ鐨勬帶鍒跺叏灞€鏍峰紡鐨勪紭鍏堢骇銆備粙缁岪layer绾ц仈灞傚畾涔夌殑涓夌鏂瑰紡涓婇潰鍏跺疄鎻愬埌浜嗕粙缁岪layer绾ц仈灞傚畾涔夌殑涓ょ鏂瑰紡銆傝繖閲屾垜浠啀鎻忚堪涓€涓嬨€侰SS@layer灞傚彔灞傜殑寮曞叆鏂瑰紡涓€鍏辨湁3绉嶃€傜洿鎺ュ垱寤哄潡绾х殑@layer瑙勫垯锛屽叾涓寘鍚綔鐢ㄤ簬鍥惧眰鐨凜SS瑙勫垯锛欯layerutilities{p{padding:.5rem;}}鍙互閫氳繃@import鍒涘缓绾ц仈灞傦紝瀵煎叆鏃惰鍒欏瓨鍦ㄦ牱寮忚〃閲岄潰锛欯import(utilities.css)layer(utilities);鍒涘缓鍛藉悕灞傚彔灞傦紝浣嗕笉鎸囧畾浠讳綍鏍峰紡銆傜劧鍚庡彲浠ュ湪CSS涓殑浠讳綍浣嶇疆娣诲姞鏍峰紡锛欯layerutilities;//...//...@layerutilities{p{color:red;}}闈濦layer鍖呰９灞傚拰@layer鏍峰紡褰撶劧浼樺厛锛岃繖閲屼細鍑虹幇涓€绉嶆儏鍐碉紝娌℃湁琚獲layer鍖呰９鐨勬牱寮忥紝鍏朵紭鍏堢骇涓庤@layer鍖呰９鐨勬牱寮忕浉姣旓紝浼氭€庝箞鏍峰憿锛熺湅杩欎釜渚嬪瓙锛欯layerA{a{color:red;}}@layerB{a{棰滆壊锛氭鑹诧紱}}@layerC{a{棰滆壊锛氶粍鑹诧紱}}a{棰滆壊锛氱豢鑹诧紱}/*娌℃湁琚獲layer鍖呰９鐨勬牱寮?/杩欓噷浼氭湁涓€涓緢閲嶈鐨勭粨璁恒€傛湭琚獲layer鍖呰９鐨勬牱寮忔瘮琚獲layer鍖呰９鐨勬牱寮忓叿鏈夋洿楂樼殑浼樺厛绾с€傛墍浠ワ紝浠ヤ笂瑙勫垯鐨勯『搴忔槸锛氫笉鍖呰９@layerstyle>@layerC>@layerB>@layerA鍖垮悕灞傚拰宓屽灞備箣闂存湁涓ょ灞傜骇鍏崇郴锛屽垎鍒槸鍖垮悕灞傚拰宓屽灞?鍖垮悕灞傚厑璁稿垱寤烘病鏈夊悕绉扮殑@layer锛欯layer{p{margin:1rem;}}杩欓噷鍒涘缓浜嗕竴涓尶鍚嶅眰銆傚尶鍚嶅眰鐨勪袱涓噸瑕佺壒鐐癸細鍒涘缓鍚庯紝涓嶈兘鍐嶅線閲岄潰娣诲姞瑙勫垯銆傝灞備笌鍏朵粬鍛藉悕灞傚叿鏈夌浉鍚岀殑鍔熻兘锛屼紭鍏堢骇涔熼伒寰悗闈㈠畾涔夌殑鍖垮悕灞傘€傚畠姣斿叾浠栧畾涔夌殑@layer灞傚叿鏈夋洿楂樼殑浼樺厛绾с€傜湅涓€涓緥瀛愶細div{width:200px;楂樺害锛?00px锛泒@layer{div{鑳屾櫙锛氱矇鑹诧紱}}@layerB,C,A;@layerA{div{鑳屾櫙锛氳摑鑹诧紱}}@layerB{div{鑳屾櫙锛氱豢鑹诧紱}}@layerC{div{鑳屾櫙锛氭鑹诧紱}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑棣栧厛瀹氫箟浜嗕竴涓尶鍚嶅眰锛屾寚瀹歞iv鐨勯鑹蹭负绮夌孩鑹诧紝鐒跺悗瀹氫箟浜咢layerB,C,A銆傝繖閲岀殑浼樺厛绾ч『搴忔槸锛欰>C>B>鏈€鍚庣殑棰滆壊鍖垮悕灞傛槸@layerA涓殑棰滆壊鍊?-blue:濡傛灉鎴戜滑鎶婂尶鍚嶅眰鏀惧湪鏈€鍚庯細div{width:200px;楂樺害锛?00px锛泒@layerB,C,A;@layerA{div{鑳屾櫙锛氳摑鑹诧紱}}@layerB{div{鑳屾櫙锛氱豢鑹诧紱}}@layerC{div{鑳屾櫙锛氭鑹诧紱}}@layer{div{鑳屾櫙锛氱矇鑹诧紱}}姝ゆ椂鏍峰紡鐨勪紭鍏堢骇椤哄簭涓猴細鍖垮悕灞?A>C>B鏈€鍚庣殑棰滆壊灏辨槸鍖垮悕灞備腑鐨勯鑹插€尖€斺€旂矇绾㈣壊锛氬祵濂楀眰璇村畬鍖垮悕灞傦紝鎴戜滑鏉ュ彇涓€涓湅宓屽灞傘€傞【鍚嶆€濅箟锛屽祵濂楀眰灏辨槸鍦ˊlayer鍐呴儴锛屾垜浠彲浠ュ祵濂椾娇鐢ˊlayer绾ц仈灞傘€傚儚杩欐牱锛欯layerA{@layerB{...}}褰撶劧锛屽畠杩樻湁鍙﹀涓€绉嶈娉曪紝涓婇潰鐨勪唬鐮佺浉褰撲簬锛欯layerA.B{...}鐞嗚В浜嗚繖涓箣鍚庯紝閭ｄ箞锛岀湅杩欐牱涓€涓緥瀛?div{瀹藉害锛?00px;楂樺害锛?00px锛泒@layerA{div{鑳屾櫙锛氳摑鑹诧紱}@layerB{div{鑳屾櫙锛氱孩鑹诧紱鎴戜滑鍦ˊlayerA涓祵濂椾簡涓€涓狜layerB锛屽悓鏃跺畾涔変簡涓€涓猟iv鏍峰紡銆傛渶缁坉iv鐨勮儗鏅槸浠€涔堥鑹诧紵瀹冩渶缁堝彉鎴愪簡钃濊壊鑳屾櫙锛氳摑鑹诧紝涓轰粈涔堬紵杩欏緢瀹规槗璁颁綇銆傛垜浠亣璁惧鏋滄病鏈堾layer鐨勫皝瑁咃紝鍏跺疄灏辨槸涓婇潰璇寸殑@layer灞傚拰闈濦layer灞傜殑浼樺厛绾ф瘮杈冦€傝繖閲岋紝闈濦layer灞傦紙鎴戜滑鍙互鐞嗚В涓烘洿楂樼骇鐨凙灞侤layer锛夊叿鏈夋洿楂樼殑浼樺厛绾с€傛墍浠ュ浜庡崟涓狜layer鍐呯殑宓屽鍏崇郴锛屾牱寮忎紭鍏堢骇涓猴細@layerA>@layerA.B澶氬眰宓屽鍥惧眰鐨勪紭鍏堢骇鍏崇郴鏄彲浠ョ殑锛屽啀鐪嬭繖鏍蜂竴绉嶆儏鍐碉細div{width:200px;楂樺害锛?00px锛泒@layerA{div{鑳屾櫙锛氳摑鑹诧紱}@layerB{div{鑳屾櫙锛氱孩鑹诧紱}}}@layerC{div{鑳屾櫙锛氶粍鑹诧紱}@layerD{div{鑳屾櫙锛氱豢鑹诧紱}}}杩欓噷鍚屾椂宓屽浜嗗涓狜layers銆傞偅涔堣繖绉嶆儏鍐靛浣曚紭鍏堝鐞嗗憿锛熻繖閲岀殑瑙勫垯鏄紝浼樺厛绾ч珮鐨凘layer锛屾棤璁烘槸鍚﹀祵濂楋紝閮芥瘮浼樺厛绾т綆鐨凘layer锛堟棤璁烘槸鍚﹀祵濂楋級鍏锋湁鏇撮珮鐨勪紭鍏堢骇銆傚洜姝わ紝杩欓噷鐨勪紭鍏堢骇椤哄簭鏄細@layerC>@layerC.D>@layerA>@layerA.B!important瀵笴SS@layer鐨勫奖鍝嶄笅闈㈡潵鐪?important瀵笴SS@layer鐨勫奖鍝嶃€傝繖閲屽彲浠ュ垎涓哄嚑绉嶆儏鍐碉紝鍏堢湅鍏朵腑涓€绉嶏細div{width:200px;楂樺害锛?00px锛涜儗鏅細榛戣壊锛泒@layerA{div{鑳屾櫙锛氳摑鑹诧紱}@layerB{div{鑳屾櫙锛氱孩鑹诧紱}}}@layerC{div{鑳屾櫙锛氶粍鑹诧紱}@layerD{div{鑳屾櫙锛氱豢鑹诧紒閲嶈锛泒}}涓婇潰鐨勪唬鐮侊紝鎴戜滑鍦ˊlayer鐨?div>涓坊鍔犱簡C.D涓€鏉?important瑙勫垯銆傚鏋滀笉鑰冭檻!important瑙勫垯锛屽疄闄匔SS浼樺厛绾т负锛堝簭鍙疯秺楂樹紭鍏堢骇瓒婇珮锛夛細@layerA.B@layerA@layerC.D@layerC闈炲眰鍖呰９鍧楋紝鍒?div>搴旇鏄粦鑹茬殑銆備絾鏄紝杩欓噷鍦ˊlayerC.D鐨?div>涓坊鍔犱簡涓€涓?important瑙勫垯銆傚叾瀹炴渶鍚庣殑div{瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細榛戣壊锛侀噸瑕侊紱}@layerA{div{鑳屾櫙锛氳摑鑹诧紱}@layerB{div{鑳屾櫙锛氱孩鑹诧紱}}}@layerC{div{鑳屾櫙锛氶粍鑹诧紱}@layerD{div{鑳屾櫙锛氱豢鑹诧紒閲嶈锛涗粩缁嗙湅涓婇潰鐨勪唬鐮侊紝鎴戜滑杩樹负闈濦layer鍖呭惈鍧楁坊鍔犱簡涓€涓?important瑙勫垯锛屾濡傛垜涓婇潰鎻忚堪鐨勯偅鏍凤紝浠庤鍒欑殑瑙掑害鏉ョ湅锛岄潪@layer鍖呭惈鍧楃殑浼樺厛绾ч珮浜庡畠@layer鍖呭惈鍧椼€傞€氬父鎴戜滑涓嶉毦鐚滃埌锛宐ackground:black!important鐨勪紭鍏堢骇搴旇楂樹簬background:green!important锛屾渶鍚?div>搴旇鍑虹幇榛戣壊銆傚疄闄呬笂锛岃繖閲屾渶鍚庣殑