CSS 涓殑 :where() 鍜?:is() 鍑芥暟鏄?CSS 閫夋嫨鍣ㄧ殑鎵╁睍锛屽畠浠彲浠ュ府鍔╂垜浠洿绠€娲佸拰楂樻晥鍦伴€夋嫨 DOM 鍏冪礌銆傚湪杩欑瘒鏂囩珷涓紝鎴戜滑灏嗗杩欎袱涓嚱鏁拌繘琛岃缁嗙殑瑙ｆ瀽锛屽府鍔╁ぇ瀹跺叏闈簡瑙ｅ畠浠殑鍔熻兘鍜岀敤娉曘€?/p>

:where() 鍑芥暟

:where() 鍑芥暟鍏佽鎴戜滑鍦ㄩ€夋嫨鍣ㄤ腑浣跨敤涓€涓嚱鏁帮紝骞朵笖鍙€夋嫨閭ｄ簺绗﹀悎鐗瑰畾鏉′欢鐨勫厓绱犮€傚畠鐨勮娉曟牸寮忓涓嬶細

:where(<function>)

鍏朵腑锛?code><function> 鏄竴涓?JavaScript 鍑芥暟锛屽畠鎺ユ敹涓€涓弬鏁帮紝琛ㄧず褰撳墠閫夋嫨鐨勫厓绱狅紝骞惰繑鍥炰竴涓竷灏斿€硷紝琛ㄧず璇ュ厓绱犳槸鍚︾鍚堟潯浠躲€傚鏋滆繑鍥?true锛屽垯璇ュ厓绱犲皢琚€夋嫨锛涘惁鍒欙紝灏嗚蹇界暐銆?/p>

渚嬪锛屾垜浠彲浠ヤ娇鐢?:where() 鍑芥暟閫夋嫨鎵€鏈?class 涓?“highlight” 鐨勫厓绱狅細

:where(el => el.classList.contains("highlight"))

:is() 鍑芥暟

:is() 鍑芥暟鏄?:where() 鍑芥暟鐨勭畝鍐欏舰寮忥紝瀹冪瓑浠蜂簬 :where() 鍑芥暟鐨勭壒娈婃儏鍐点€傚畠鐨勮娉曟牸寮忓涓嬶細

:is(<selector>)

鍏朵腑锛?code><selector> 鏄竴涓?CSS 閫夋嫨鍣紝瀹冭〃绀烘垜浠渶瑕侀€夋嫨鐨勫厓绱犮€?/p>

渚嬪锛屾垜浠彲浠ヤ娇鐢?:is() 鍑芥暟鏉ラ€夋嫨鎵€鏈?class 涓?“highlight” 鐨勫厓绱狅紝杩欐牱鐨勮娉曞涓嬶細

:is(.highlight) {
  background-color: yellow;
  font-weight: bold;
}

杩欐牱鐨勮娉曚細灏嗘墍鏈?class 涓?“highlight” 鐨勫厓绱犵殑鑳屾櫙棰滆壊璁剧疆涓洪粍鑹诧紝瀛椾綋绮楃粏璁剧疆涓虹矖浣撱€?/p>

:is() 鍑芥暟鏄竴绉嶇畝鍖栫増鏈殑 :where() 鍑芥暟锛屽畠鐩稿綋浜庢妸绠€鍗曠殑閫夋嫨鍣ㄨ娉曡浆鎹负 :where() 鍑芥暟璇硶銆傚湪绠€鍗曠殑鎯呭喌涓嬶紝鎮ㄥ彲浠ヤ娇鐢?:is() 鍑芥暟锛岃€屼笉鏄娇鐢?:where() 鍑芥暟銆?/p>

鎬昏€岃█涔嬶紝:where() 鍜?:is() 鍑芥暟閮芥槸 CSS 涓潪甯稿己澶х殑閫夋嫨鍣紝瀹冧滑鍙互甯姪鎮ㄦ洿绠€娲佸拰楂樻晥鍦伴€夋嫨 DOM 鍏冪礌锛屽苟涓旀洿濂藉湴鎺у埗瀹冧滑鐨勬牱寮忋€傚洜姝わ紝瀛︿細浣跨敤 :where() 鍜?:is() 鍑芥暟鏄繀涓嶅彲灏戠殑锛屽浜庝换浣曚竴浣?CSS 鐨勫紑鍙戣€呮潵璇淬€?/p>

鍒版杩欑瘒鍏充簬娣卞叆瑙ｆ瀽CSS 涓殑 :where() 鍜?:is() 鍑芥暟(鍔熻兘鍜岀敤娉?鐨勬枃绔犲氨浠嬬粛鍒拌繖浜?鏇村鐩稿叧css :where() 鍜?:is() 鍑芥暟鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒