高手如何写出别人看不懂的选择器

时间：2023-03-31 13:29:39 CSS

杩欑瘒鏂囩珷鐨勬爣棰樻槸濡備綍鍐欏嚭鍒汉鐪嬩笉鎳傜殑閫夋嫨鍣紝浣嗘湰鎰忓苟涓嶆槸甯屾湜澶у浼氬啓杩欎箞澶嶆潅鐨勯€夋嫨鍣紝涓€浜涘鏉傦紙鎬紓锛夌殑閫夋嫨鍣ㄥ彲鑳藉湪鏌愪簺鐗瑰畾鐨勫満鏅笅浼氭湁绁炲鐨勬晥鏋滐紝鎴栬€呰繖涓€夋嫨鍣ㄦ槸鍩轰簬褰撴椂鐨勭壒娈婅儗鏅€屽啓鐨勩€傞€氳繃杩欎簺妗堜緥锛屾垜浠彲浠ヤ竴绐SS閫夋嫨鍣ㄧ殑涓€浜涙湁瓒ｄ箣澶勩€備粠涓幏寰椾竴浜涙湁鐩婄殑缁忛獙銆傚悇绉嶄吉绫诲彔鍔犲厛鐪嬬涓€涓被锛屽湪鍗曚釜閫夋嫨鍣ㄤ腑锛屽彔鍔犲悇绉嶄吉鍏冪礌銆傚儚杩欐牱锛歛:not(main*:not(:is(h2,h3)>*)){color:red;}杩欎釜閫夋嫨鍣ㄤ竴鍒嗛挓涓嶄粩缁嗙湅閮戒笉鐭ラ亾鏄粈涔堜笢瑗?锛堜粩缁嗙湅鍙兘涓嶇煡閬撱€傘€傘€傦級瀹冩贩鍏ヤ簡涓や釜姣旇緝鏂扮殑浼被閫夋嫨鍣細not()锛氱敤浜庡尮閰嶄笉婊¤冻涓€缁勯€夋嫨鍣ㄧ殑鍏冪礌銆傜敱浜庡畠鐨勪綔鐢ㄦ槸闃叉鐗瑰畾鍏冪礌琚€変腑锛屾墍浠ュ張琚О涓哄惁瀹氫吉绫伙細is()锛氫互涓€涓€夋嫨鍣ㄥ垪琛ㄤ负鍙傛暟锛岄€夋嫨鍒楄〃涓换鎰忎竴涓彲浠ヨ閫変腑鍏冪礌鐨勯€夋嫨鍣ㄣ€傚綋鐒跺浜庡畠鐨勬媶瑙ｏ細a:not(main*):selectnotallatagsunderthe

tagmain*:not(:is(h2,h3)>*):selectallunder

tag涓嶆槸

鍜?h3>瀛愬厓绱犵殑鍏冪礌鍚堝苟锛氶€夋嫨鎵€鏈変笉鍦?main>鏍囩涓嬬殑鏍囩鍜屾墍鏈?main>涓嬩笉鍦?涓嬬殑瀛?a>h2>鍜?h3>闄や簡.鍋囪鏈変笅闈㈢殑HTML
main>a
main>h1>a
ahref="">main>h2>a
main>h2>p>a
main>h3>a

h1>a

h2>a

h3>a

a缁撴灉濡備笅锛氳繖涓狢SS閫夋嫨鍣紝姝ｅ父鍐欏彲浠ユ仮澶嶏紝鍙槸浠ｇ爜閲忔湁鐐瑰銆備竴鑸儏鍐典笅锛屼笉寤鸿鍐欒繖涔堝鏉傜殑閫夋嫨鍣ㄣ€傝繖鍙槸涓€涓緥瀛愶紝宓屽澶氬眰涓嶅悓鐨勪吉绫诲浜庝唬鐮佺殑鍙鎬ф潵璇村彲鑳芥槸鐏鹃毦鎬х殑銆傜濂囩殑鐗规畩瀛楃鍡紝鏈変竴澶╀綘閬囧埌浜嗚繖鏍蜂竴涓€夋嫨鍣細#\~\!\@\$\%\^\&\*\_\+-\=\,\銆俓/\'\;\:\?\>\<\\\[\]\{\}\|\`\#{棰滆壊锛氱孩鑹?}澶╁摢銆傛垜鎯充綘鐨勭涓€鍙嶅簲涓€瀹氭槸杩欎釜閫夋嫨鍣ㄧ湡鐨勬湁鐢ㄥ悧锛熸姳姝夛紝瀹冪‘瀹炴湁鏁堬紝CSS涓殑CSS绫诲悕绉颁腑鍏佽浣跨敤闄UL涔嬪鐨勪换浣曞瓧绗︺€傚鏋滀綘鏈夊叴瓒ｏ紝鍙互鐪嬬湅杩欎釜锛氬摢浜涘瓧绗﹀湪CSS绫诲悕/閫夋嫨鍣ㄤ腑鏈夋晥锛熷洜姝わ紝涓婇潰鐨勯€夋嫨鍣ㄥ彲浠ュ尮閰嶈繖鏍风殑鏍囩锛?divid="~!@$%^&*()_+-=,./';:?><\[]{}|`#">Lorem

鐪熸淮鐗涘暏閰?/div>#馃拤馃挧馃悅馃嵑{padding:10px;color:red;}emmm锛屾槸鐨勶紝杩欎釜涔熻兘鐢熸晥锛氭墍浠ワ紝骞朵笉鏄壒鍒矖绮楋紝鏋佷笉鎺ㄨ崘澶у鍦–SS绫诲悕涓贩鍏?鍜宊浠ュ鐨勭壒娈婂瓧绗︺€傝嚜宸卞閲嶉噸鍙犱笅闈㈢殑閫夋嫨鍣ㄤ篃鏈夌偣鎰忔€濓紝涓嶈繃鍙互鍐欏湪鐗规畩鐨勫叧澶淬€傚儚杩欐牱鐨勯€夋嫨鍣細div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color{color:red;}涓轰粈涔堜細鍑虹幇杩欎釜閫夋嫨鍛㈣澶囷紵澶у鏁版儏鍐典笅鏄鍔犱紭鍏堢骇銆傛垜浠兘鐭ラ亾涓嶅悓鐨凜SS閫夋嫨鍣ㄤ箣闂存槸鏈変紭鍏堢骇鐨勩€傛湁杩欐牱涓€涓満鏅綔涓轰緥瀛愩€傛湁鏃跺€欙紝鎴戜滑鍦ㄤ笟鍔′腑寮曞叆浜嗕竴涓粍浠跺簱锛屼娇鐢ㄤ簡瀹冪殑涓€涓寜閽紝浣嗘槸鍙堟兂鏀瑰彉瀹冪殑涓€浜涙牱寮忋€傜粰瀹冨姞浜嗕竴涓被鍚嶏紝鍙戠幇缁欏搴旂殑绫诲悕鍔犱簡override鏍峰紡鍚庡苟娌℃湁鐢熸晥銆傚師鍥犳槸瀹氫箟鏍峰紡鐨勯€夋嫨鍣ㄤ笉澶熼珮銆傝繖鏃跺€欐垜浠彲浠ラ€氳繃鑷繁鍙犲姞鏉ュ鍔犻€夋嫨鍣ㄧ殑鏉冮噸銆俤iv.g-text-color.g-text-color.g-text-color鐨勬潈閲嶉珮浜巇iv.g-text-color.g-text-color銆傛墍浠ュ湪涓€浜涙瀬绔殑鎯呭喌涓嬶紝灏变細鍑虹幇涓婅堪鐨勯€夋嫨鍣ㄣ€傚綋鐒讹紝涓€鑸儏鍐典笅锛屼笉寤鸿鍐欒繖涔堣浜烘湜鑰岀敓鐣忕殑閫夋嫨銆傜患涓婃墍杩帮紝浣滃紛閫夋嫨鍣ㄨ繕鏄緢澶氱殑锛屾湰鏂囧彧鏄啺灞变竴瑙掋€備粠鍒汉鐪嬩笉鎳傜殑閫夋嫨鍣ㄦ€庝箞鍐欙紝鎴戜滑鍙互鐭ラ亾CSS閫夋嫨鍣ㄦ湁寰堝缁嗚妭銆傜煡閬撲笉濂界殑閫夋嫨鍣ㄥ彲浠ュ府鍔╂垜浠洿濂藉湴缂栧啓婕備寒鑰屾纭殑閫夋嫨鍣ㄣ€傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鏁堟灉锛屽彲浠ュ叧娉ㄦ垜鐨凜SS鐏垫劅鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>

高手如何写出别人看不懂的选择器

鍜?h3>瀛愬厓绱犵殑鍏冪礌鍚堝苟锛氶€夋嫨鎵€鏈変笉鍦?main>鏍囩涓嬬殑鏍囩鍜屾墍鏈?main>涓嬩笉鍦?涓嬬殑瀛?a>h2>鍜?h3>闄や簡.鍋囪鏈変笅闈㈢殑HTMLmain>amain>h1>aahref="">main>h2>amain>h2>p>amain>h3>a

main>h1>a

ahref="">main>h2>a

main>h2>p>a

main>h3>a

h1>a

h2>a

h3>a

鍜?h3>瀛愬厓绱犵殑鍏冪礌鍚堝苟锛氶€夋嫨鎵€鏈変笉鍦?main>鏍囩涓嬬殑鏍囩鍜屾墍鏈?main>涓嬩笉鍦?涓嬬殑瀛?a>h2>鍜?h3>闄や簡.鍋囪鏈変笅闈㈢殑HTML
main>a
main>h1>a
ahref="">main>h2>a
main>h2>p>a
main>h3>a