CSS选择器权重和优先级
时间：2023-03-30 15:52:12
CSS
缁勭獊鐒跺張鑱婅捣浜咰SS鏍峰紡鐨勬潈閲嶃€傝繖涓瘽棰樻瘡闅斾竴娈垫椂闂村氨浼氬嚭鐜颁竴娆★紝浣嗘槸姣忔閮藉幓鎼滅储鍜屽垎浜叧浜巗electorweight鐨勬枃绔狅紝鏈夌偣澶夯鐑︿簡銆傛渶涓昏鐨勬槸閰嶅浘銆傛壘璁板繂涓殑鍥剧墖鐪熺殑寰堥夯鐑︷煒傦紝涓嶅鑷繁鏁寸悊涓€绡囨枃绔狅紝浠ュ悗鐩存帴鍒嗕韩鎴戠殑绗旇銆傚叾瀹炴潈閲嶈绠楀苟涓嶉夯鐑︼紝鍒嗕负4绫伙細inlineStyle锛氬唴鑱旀牱寮?ID锛欼D閫夋嫨鍣ㄣ€侰lass锛氱被锛屽睘鎬у拰浼被閫夋嫨鍣ㄥ厓绱狅細鍏冪礌鍜屼吉绫诲厓绱犻€夋嫨鍣ㄧ畝鍗曟潈閲嶆瘮杈冨唴鑱旀牱寮?ID>Class>Element>*涓嶇敤璇翠簡锛屼富瑕佹槸澶氫釜閫夋嫨鍣ㄦ贩鍚堟椂鐨勮绠楅棶棰樸€傚ぇ閮ㄥ垎浜轰竴鎯冲埌CSS鏉冮噸锛岄鍏堝簲璇ヤ細鎯冲埌杩欏紶鍥剧墖鏉ユ簮锛欳onciseModernMagic鐒跺悗绠€鍗曠殑鏍规嵁杩欓噷鐨勬潈閲嶈绠楃粨鏋滐紝瀵规瘮涓€涓嬬粨鏋溿€備緥濡傦細浣嗘槸锛佽繖涓绠椾細鏈変竴涓棶棰橈紝灏辨槸濡傛灉鏌愪釜item鐨剆elector瓒呰繃10涓紝浼氫笉浼氬紩璧锋€€鐤戯紝浼氫笉浼氳鎻愬崌锛屾瘮濡?/1涓狪Dselector#demo{color:green}//11A绫婚€夋嫨鍣?demo1.demo2.demo3.demo4.demo5.demo6.demo7.demo8.demo9.demo10.demo11{color:red}鎸夌収涓婇潰鐨勮绠楁柟娉曪紝缁撴灉鏄?00:110锛屽叾瀹炰笉鏄疄闄呬笂浼氳11涓被閫夋嫨鍣ㄨ鐩栥€傛墍浠ュ叾瀹炲畠鏄竴涓被鏁扮粍鐨勫舰寮忥紝瀹冪殑璁＄畻缁撴灉鏄痆0,1,0,0]鐩稿浜嶽0,0,11,0]銆傝繖涓粠W3C瑙勮寖涓彲浠ョ湅鍑烘潵锛屽叾瀹炴槸鍒嗕负[A,B,C,D]鍥涚被锛岀劧鍚庝竴涓€姣旇緝锛屼笉浼氬彈鍒拌繘浣嶇殑褰卞搷銆傗瓙!important!important鏄竴涓壒娈婄殑澹版槑锛學3C灏嗗叾涓庨€夋嫨鍣ㄦ潈閲嶇殑璁＄畻鍖哄垎寮€鏉ワ紝浣嗗緢澶氭枃绔犲皢鍏朵綔涓?绫荤殑鏉冮噸鏀惧湪classA涔嬪墠锛屽疄闄呭伐浣滀腑瑙傚療鍒扮殑鏁堟灉涔熸槸涓€鑷寸殑锛屽彧鏄潈閲嶄笉鑳介€氳繃閲嶅澹版槑!important锛堟棤鏁堢殑灞炴€у€硷級鏉ュ鍔狅紝浣嗗鏋滃畠鏄户鎵跨殑!important灞炴€э紝瀹冨皢琚柊澹版槑瑕嗙洊銆傚鏋滄偍浣跨敤閫熻灞炴€у苟浣跨敤!important澹版槑瀹冿紝鍒欏皢閫熻灞炴€э紙渚嬪鈥滆儗鏅€濓級澹版槑涓衡€?important鈥濈瓑鍚屼簬灏嗗叾鎵€鏈夊瓙灞炴€у０鏄庝负鈥?important鈥濄€傚皢绠€鍐欏睘鎬э紙渚嬪'background'锛?锛夎缃负鈥滐紒important鈥濈瓑鍚屼簬灏嗗叾鎵€鏈夊瓙灞炴€у０鏄庝负鈥滐紒important鈥濄€傝鎴戜滑鐪嬩竴涓畬鏁寸殑渚嬪瓙TesttextABC
elementstyle:.demo-class1{font:italic12ptsans-serif!important;鏂囨湰缂╄繘锛?em锛侀噸瑕佺殑;//瑕嗙洊}.demo-class2{瀛椾綋绮楃粏锛氱矖浣擄紱//鏃犳晥瀛椾綋澶у皬锛?4pt锛?/琛岄珮鏃犳晥锛?.2!important;//鐢熸晥text-indent:1.5em!important;//鐢熸晥}.demo-class2span{font-style:normal//鐢熸晥}鎺ㄨ崘鏉冮噸璁＄畻鍥惧湪鏂囨湯鍥剧墖鏉ユ簮锛氭柊鐗圕SS-Tricks涓€夋嫨鍣ㄦ潈閲嶄慨鏀规渶鏂扮増W3C閫夋嫨鍣ㄤ腑鏂囨。锛屽幓鎺変簡鏉冮噸鐨勫唴鑱旀牱寮忥紝鏉冮噸鍙樻垚浜嗕笁绫籟#ID,.Class,Element]鍦ㄧ湅W3C瑙勮寖鐨勬椂鍊欙紝鍙戠幇鏈夎繖涔堜竴鍙ヨ瘽Bydefault,rulesinauthorstylesheets姣旂敤鎴锋牱寮忚〃涓殑瑙勫垯鏇撮噸瑕併€備絾鏄紝瀵逛簬鈥?important鈥濊鍒欙紝浼樺厛绾ф槸鐩稿弽鐨勩€傛墍鏈夌敤鎴峰拰浣滆€呰鍒欓兘姣擴A榛樿鏍峰紡琛ㄤ腑鐨勮鍒欏叿鏈夋洿澶х殑鏉冮噸銆傞粯璁ゆ儏鍐典笅锛屼綔鑰呮牱寮忚〃锛坅uthorstylesheets锛変腑鐨勮鍒欐瘮鐢ㄦ埛鏍峰紡琛紙userstylesheets锛変腑鐨勮鍒欏叿鏈夋洿澶х殑鏉冮噸銆備絾鏄紝瀵逛簬鈥?important鈥濊鍒欙紝浼樺厛绾ф槸鐩稿弽鐨勩€傛墍鏈夌敤鎴峰拰浣滆€呰鍒欓兘姣擴A榛樿鏍峰紡琛ㄤ腑鐨勮鍒欏叿鏈夋洿澶х殑鏉冮噸銆傚叾涓紝AuthorStylesheets鍜孶serStylesheets鏄垜浠ュ墠浠庢湭鎺ヨЕ杩囩殑鏈銆傚綋鐒讹紝UA鏄祻瑙堝櫒锛坲seragent锛夌殑榛樿鏍峰紡銆備粠缁撴灉鏉ョ湅鍙戠幇锛氫綔鑰呮牱寮忚〃锛圓uthorStylesheets锛夋槸寮€鍙戣€呬负椤圭洰閰嶇疆鐨勬牱寮忚〃銆傜敤鎴锋牱寮忚〃锛圲serStylesheets锛夋祻瑙堝櫒涓烘祻瑙堢珯鐐圭殑鐢ㄦ埛鎻愪緵浜嗕慨鏀瑰綋鍓嶇珯鐐规牱寮忕殑鍔熻兘锛堥€氬父鐢辨祻瑙堝櫒鎻掍欢瀹炵幇锛夈€傜敓鎴愮殑鏍峰紡琛ㄦ枃妗ｈ祫婧怌SS2-6.4绾ц仈-W3CRecommendationCSS2-6.4.2閲嶈瑙勫垯-W3CRecommendationCSS2-6.4.3璁＄畻閫夋嫨鍣ㄧ殑鐗瑰紓鎬?W3CRecommendationselectors-16.璁＄畻閫夋嫨鍣ㄧ殑鐗瑰紓鎬?W3CRecommendationDraft-6.3銆傞噸瑕佸０鏄庯細!important娉ㄨВ-W3CEditor'sWeightCalculationRulesforDraftCSSSelectors-ConciseModernMagicDay20:CSSWeightsofSmallThings(cssspecificity)-iTBanghelpSpecificationsonCSSSpecificity|CSS-TricksUser鏍峰紡琛╲sAuthor鏍峰紡琛▅鏍戝眿绀惧尯
