浅谈逻辑选择器——父选择器来了！
时间：2023-03-28 20:02:03
HTML
CSS閫夋嫨鍣ㄥ鏃忎腑锛屾柊澧炰簡涓€绫绘瘮杈冩柊鐨勯€夋嫨鍣ㄢ€斺€旈€昏緫閫夋嫨鍣ㄣ€傜洰鍓嶆湁4涓垚鍛橈細:is:where:not:has鏈枃灏嗗甫浣犱簡瑙ｅ拰鍔犳繁浠栦滑銆傚簲鐢ㄦ墍瀛︾煡璇嗗苟缂栧啓鏇寸幇浠ｇ殑閫夋嫨鍣ㄣ€?is浼被閫夋嫨鍣?is()CSS浼被鍑芥暟灏嗛€夋嫨鍣ㄥ垪琛ㄤ綔涓哄弬鏁帮紝骞堕€夋嫨鍙敱鍒楄〃涓殑浠讳綍涓€涓€夋嫨鍣ㄩ€夋嫨鐨勫厓绱犮€備互寰€瀵逛簬澶氫釜涓嶅悓鐖跺鍣ㄧ殑鍚屼竴涓瓙鍏冪礌鐨勪竴浜涢€氱敤鏍峰紡璁剧疆锛屽彲鑳戒細鍑虹幇濡備笅CSS浠ｇ爜锛歨eaderp:hover,mainp:hover,footerp:hover{color:red;cursor:pointer;}鐜板湪鏈変簡:is()浼被锛屼笂闈㈢殑浠ｇ爜鍙互閲嶅啓涓猴細:is(header,main,footer)p:hover{color:red;cursor:pointer;}瀹冨苟娌℃湁瀹炵幇閫夋嫨鍣ㄧ殑鏂板姛鑳斤紝鏇村儚鏄竴涓娉曠硸锛岀被浼间簬JavaScriptES6涓殑Class()璇硶锛屽彧鏄鍘熸湁鍔熻兘鐨勯噸鏂板寘瑁呰璁★紝鏇存槗浜庤〃杈句竴绉嶆搷浣滆娉曪紝绠€鍖栦簡涓€浜涘鏉備唬鐮佺殑缂栧啓銆傚彞娉曠硸鏄寚鍦ㄧ紪绋嬭瑷€涓兘澶熸洿瀹规槗鍦拌〃杈句竴涓搷浣滅殑鏂囨硶銆傚畠鍙互璁╃▼搴忓憳鏇村鏄撲娇鐢ㄨ瑷€锛屾搷浣滃彲浠ュ彉寰楁洿娓呮櫚銆佹洿鏂逛究锛屾垨鑰呰鏇寸鍚堢▼搴忓憳鐨勭紪绋嬨€備範鎯€傛瘮杈冮€氫織鏄撴噦鐨勭悊瑙ｅ氨鏄湪浠ュ墠鐨勮娉曞熀纭€涓婃崲涓€绉嶅啓娉曪紝瀹炵幇鍚屾牱鐨勫姛鑳斤紝鍙槸鍐欐硶涓嶅悓锛屼富瑕佹槸涓轰簡璁╁紑鍙戣€呭湪浣跨敤杩囩▼涓洿瀹规槗鐞嗚В銆?涓€鍥捐儨搴忥紙鍙傝€僋ewCSS鍑芥暟寮忎吉绫婚€夋嫨鍣?is()鍜?where()锛夛細鏀寔澶氬眰绾ц仈銆傛垜浠潵鐪嬬湅杩欎釜鎯呭喌銆傚師濮婥SS浠ｇ爜濡備笅锛?div>divi
pi
divspan
p璺ㄥ害
h1璺ㄥ害
h1i
濡傛灉瑕佸皢涓婇潰鐨凥TML锛?div>鍜?p>涓嬬殑
鍜?i>鐨勯鑹茶缃负绾㈣壊锛屾甯哥殑CSS鍙兘鏄繖鏍风殑锛歞ivspan,divi,pspan,pi{color:red;}鍔犱笂:is()锛屼唬鐮佸彲浠ョ畝鍖栦负锛?is(div,p):is(span,i){color:red;}缁撴灉濡備笅锛氳繖閲岋紝杩樻敮鎸?is()鐨勭骇鑱斾娇鐢ㄣ€傞€氳繃:is(div,p):is(span,i)鐨勬帓鍒楃粍鍚堬紝鍙互缁勫悎涓婇潰4琛岀殑閫夋嫨鍣紝杈惧埌鍚屾牱鐨勬晥鏋溿€傚綋鐒惰繖涓緥瀛愭瘮杈冪畝鍗曪紝鐪嬩笉鍑?is()鐨勫▉鍔涖€備笅闈㈣繖涓緥瀛愭瘮杈冩槑鏄撅紝绫讳技CSS閫夋嫨鍣ㄤ唬鐮侊細ololul,olulul,olmenuul,olul,ololmenu,olulmenu,olmenumenu,oldirmenu,ollordir,ol鑿滃崟鑿滃崟鑿滃崟鑿滃崟鑿滃崟鑿滃崟鑿滃崟鑿滃崟鑿滃崟ulul鑿滃崟ul鑿滃崟ul鑿滃崟ul鑿滃崟menudirmenumenudirmenudirirdirmenudirdirdirdir{list-style-type:square;}鍙互浣跨敤:is()浼樺寲::is(ol,ul,menu,dir):is(ol,ul,menu,dir):is(ul,menu,dir){list-style-type:square;}鍏冪礌銆傚濡傦細鎵嬫満锛岃瘽涓嶆敮鎸佷吉鍏冪礌锛屼吉绫伙紝濡傦細鐒︾偣銆侊細鎮仠銆俤ivp::before,divp::after{鍐呭锛氣€溾€濓紱//...}涓嶈兘鍐欐垚锛歞ivp:is(::before,::after){content:"";//...}:is閫夋嫨鍣ㄧ殑浼樺厛绾х湅杩欐牱涓€涓湁瓒ｇ殑鎯呭喌锛?div>where&istest 鎴戜滑涓哄厓绱犺缃粯璁ら鑹?test-class:div.test-class{color:red;}濡傛灉锛屾鏃舵垜浠紩鍏?is()杩涜鍖归厤锛歞iv:is(p){color:blue;}姝ゆ椂锛岀敱浜巇iv:is(p)鍙互鐪嬪仛鏄痙ivp锛屾墍浠ヤ紭鍏堢骇涓簄odiv.test-class寰堥珮锛屾墍浠ラ€変腑鏂囨湰鐨勯鑹蹭笉浼氭敼鍙樸€備絾鏄紝濡傛灉鎴戜滑鍦?is()閫夋嫨鍣ㄤ腑娣诲姞涓€涓?test-id锛屾儏鍐靛氨涓嶅悓浜嗐€俤iv:is(p,#text-id){color:blue;}鏍规嵁鎴戠殑鐞嗚В锛屽鏋滃皢涓婇潰鐨勯€夋嫨鍣ㄦ媶鍒嗭紝涓婇潰鐨勪唬鐮佸彲浠ユ媶鍒嗕负锛歞ivp{color:blue;}div#text-id{color:blue;}閭ｄ箞锛屾垜浠湁鐞嗙敱鐚滄祴鏄甫鏈?text-id鐨?p>鍏冪礌鏈夋洿楂樹紭鍏堢骇鐨勯€夋嫨鍣紝棰滆壊浼氬彉鎴愯摑鑹诧紝鑰屽彟涓€涓猟ivp涓嶅楂樺鑷寸涓€涓棶棰樹竴娈垫枃瀛椾粛鐒舵槸缁胯壊鐨勩€備絾鏄湪杩欓噷锛岀濂囩殑鏄紝涓ゆ潯鏂囨湰閮藉彉鎴愪簡钃濊壊锛欳odePenDemo--CSS:is閫夋嫨鍣ㄧ殑鐗规畩鎬ц繖鏄洜涓?is()鐨勪紭鍏堢骇鏄敱閫夋嫨鍣ㄧ‘瀹氱殑鍏堕€夋嫨鍣ㄥ垪琛ㄤ腑鐨勬渶楂樹紭鍏堢骇銆傛垜浠笉鑳藉垎寮€鏉ョ湅銆傚浜巇iv:is(p,#text-id)锛宨s:()閲岄潰鏈変竴涓猧d閫夋嫨鍣紝鎵€浠ユ墍鏈夌鍚堣繖涓鍒欑殑鍏冪礌閮戒細搴旂敤div#id绾у埆鐨勯€夋嫨鍣ㄤ紭鍏堢骇銆傝繖鍦ㄨ繖閲岄潪甯搁噸瑕併€傚啀寮鸿皟涓€涓嬶紝瀵逛簬:is()閫夋嫨鍣ㄧ殑浼樺厛绾э紝鎴戜滑鏄笉鑳藉垎寮€鐨勩€傚畠浠槸涓€涓暣浣擄紝浼樺厛绾у彇鍐充簬閫夋嫨鍣ㄥ垪琛ㄤ腑浼樺厛绾ф渶楂樼殑閫夋嫨鍣ㄣ€?is:matches()鍜?any():is()鐨勫埆鍚嶆槸鏈€鏂扮殑瑙勮寖鍚嶇О銆備箣鍓嶆湁鐩稿悓鍔熻兘鐨勯€夐」锛屽垎鍒槸锛?is(div,p)span{}//绛変环浜庯細-webkit-any(div,p)span{}:-moz-any(div,p)span{}:matches(div,p)span{}褰撶劧涓嬮潰涓変釜宸茬粡搴熷純浜嗭紝涓嶅缓璁户缁娇鐢ㄣ€傝€屼粖澶╋紙2022-04-27锛夛細:is()鐨勫吋瀹规€у凡缁忓緢濂戒簡銆傚鏋滀笉闇€瑕佸吋瀹笽E绯诲垪锛屽彲浠ヨ€冭檻寮€濮嬩娇鐢紙withautoprefixer锛夈€傜湅涓€涓婥anIUse::where浼被閫夋嫨鍣ㄦ潵鐞嗚В:is涔嬪悗锛屾垜浠彲浠ュ啀鐪嬩竴涓?where锛屽畠浠袱涓槸闈炲父寮虹浉鍏崇殑銆?where鍚屾牱灏嗛€夋嫨鍣ㄥ垪琛ㄤ綔涓哄叾鍙傛暟锛屽苟閫夋嫨鍙敱璇ュ垪琛ㄤ腑鐨勪竴涓€夋嫨鍣ㄩ€夋嫨鐨勪换浣曞厓绱犮€傝繕鏄繖涓緥瀛愶細:where(header,main,footer)p:hover{color:red;cursor:pointer;}涓婇潰浠ｇ爜浣跨敤浜?where锛屽彲浠ヨ繎浼间负锛歨eaderp:hover,mainp:hover,footerp:hover{color:red;cursor:pointer;}杩欏緢鏈夎叮锛岃繖涓嶆槸鍜屼笂闈㈣鐨?涓€鏍峰悧锛熼偅涔堝畠浠箣闂存湁浠€涔堝尯鍒憿锛?is鍜?where鐨勫尯鍒鍏堬紝浠庤娉曚笂鏉ヨ锛?is鍜?where鏄畬鍏ㄤ竴鏍风殑銆傚畠浠箣闂寸殑鏍稿績鍖哄埆鏄紭鍏堢骇銆傛垜浠潵鐪嬭繖鏍蜂竴涓緥瀛愶細
CSS浠ｇ爜濡備笅锛?is(div)p{color:red;}:where(div)p{color:green;}閫氬父锛屾寜鐓ф垜浠殑鐞嗚В锛?is(div)p鍜?where(div)p閮藉彲浠ヨ浆鍖栦负divp銆傜敱浜?where(div)p鏄悗闈㈠畾涔夌殑锛屾墍浠ユ枃鏈殑棰滆壊搴旇鏄豢鑹层€備絾鏄紝瀹為檯棰滆壊鏄剧ず涓篶olor:redred:杩欐槸鍥犱负:where()鍜?is()鐨勫尯鍒湪浜?where()鐨勪紭鍏堢骇濮嬬粓涓?锛岃€?is()鐨勪紭鍏堢骇涓篈绫荤敱鍏堕€夋嫨鍣ㄥ垪琛ㄤ腑浼樺厛绾ф渶楂樼殑閫夋嫨鍣ㄧ‘瀹氥€備笂闈㈢殑渚嬪瓙涓嶆槸鐗瑰埆鏄庢樉锛屾垜浠◢寰慨鏀逛竴涓嬶細CSS浠ｇ爜::is(div)p{color:red;}:where(#container)p{color:green;}鍗充究濡傛锛岀敱浜?where(#container)鐨勪紭鍏堢骇涓?锛屾墍浠ユ枃鏈殑棰滆壊鏄繕鏄孩绾㈢殑銆?where()濮嬬粓鍏锋湁0鐨勪紭鍏堢骇锛岃繖鏄娇鐢ㄥ畠鏃惰璁颁綇鐨勪簨鎯呫€傜粍鍚堜笌宓屽CSS閫夋嫨鍣ㄧ殑涓€涓潪甯稿ぇ鐨勭壒鐐瑰氨鏄粍鍚堜笌宓屽銆?is鍜?where涔熶笉渚嬪锛屾墍浠ュ畠浠篃鍙互鐩镐簰缁勫悎鍜屽祵濂椼€備互涓婥SS閫夋嫨鍣ㄩ兘鏄悎鐞嗙殑锛?*combination*/:is(h1,h2):where(.test-a,.test-b){text-transform:uppercase;}/*nested*/.title:where(h1,h2,:is(.header,.footer)){font-weight:bold;}杩欓噷绠€鍗曟€荤粨涓?is鍜?where閮芥槸寰堝ソ鐨勫垎缁勯€昏緫閫夋嫨鍣紝鍞竴涓嶅悓鐨勬槸浼樺厛绾?where()鐨勪紭鍏堢骇濮嬬粓涓?锛岃€?is()鐨勪紭鍏堢骇鐢卞叾閫夋嫨鍣ㄥ垪琛ㄥ喅瀹氫紭鍏堢骇鐢辨渶楂樼骇鍒殑閫夋嫨鍣ㄥ喅瀹氥€?not浼被閫夋嫨鍣ㄤ笅闈粙缁嶄竴涓潪甯告湁鐢ㄧ殑:not浼被閫夋嫨鍣ㄣ€?not浼€夋嫨鍣ㄧ敤浜庡尮閰嶄笉鍖归厤涓€缁勯€夋嫨鍣ㄧ殑鍏冪礌銆傜敱浜庡畠鐨勪綔鐢ㄦ槸闃叉鐗瑰畾鍏冪礌琚€変腑锛屾墍浠ュ畠涔熻绉颁负鍚﹀畾浼被銆備緥濡傦紝HTML缁撴瀯濡備笅锛?divclass="a">div.a
