使用CSS--marker自定义项目符号
时间：2023-03-31 01:59:56
CSS
鐜板湪浣跨敤
鎴?ol>鏃跺彲浠ヨ交鏉捐嚜瀹氫箟鏁板瓧鎴栭」鐩鍙风殑棰滆壊銆佸ぇ灏忔垨绫诲瀷銆傛劅璋SS::marker鎴戜滑鍙互鏇存敼椤圭洰绗﹀彿鍜屾暟瀛楃殑鍐呭鍜屼竴浜涙牱寮忋€傛祻瑙堝櫒鍏煎鎬у綋Chromium86鍙戝竷鏃讹紝妗岄潰鍜孉ndroid涓婄殑Firefox銆佹闈笂鐨凷afari鍜宨OS涓婄殑Safari浠ュ強鍩轰簬Chromium鐨勬闈㈠拰Android娴忚鍣ㄥ皢鏀寔::marker銆傛湁鍏虫洿鏂帮紝璇峰弬闃匨DN鐨勬祻瑙堝櫒鍏煎鎬х煩闃点€備吉鍏冪礌鑰冭檻濡備笅鍩烘湰HTML鏃犲簭鍒楄〃锛?ul>- 娣辩綉锝滅編鍥㈢涓€鍒涗笟椤圭洰锛氱帇鍏磋鈥滆繖鍦轰粭涓€瀹氳璧⑩€?/li>
- 澶栧獟锛氬崕涓哄彈鍐插嚮缇庡浗鍒惰鍑虹幇杞満锛岀編鍥芥垨鍏佽閮ㄥ垎浼佷笟鎻愪緵闈?G闆堕儴浠讹細瀹樻柟鎵胯鏈夌己闄风數姹犲苟鍙洖锛屽崰鎬婚攢鍞3.6%
- 鍘歩Phone鑳屽悗鐨勫鏂欙細瀵屽＋搴锋嫈鎺夎嫻鏋滅緤姣涳紝搴撳厠鍋峰伔鎵惧鑳?/li>
鎴戜滑鐭ラ亾瀹冧細鍛堢幇濡備笅姣忎釜
椤圭洰浠ヤ竴涓偣寮€澶淬€備粖澶╂垜浠緢楂樺叴璁ㄨ::marker浼厓绱狅紝瀹冩槸鎮ㄥ垱寤虹殑椤圭洰绗﹀彿鍏冪礌鐨勬祻瑙堝櫒鏍峰紡銆傚叧閿湳璇細浼厓绱犳槸鎸囨枃妗ｄ腑鐨勫厓绱狅紝鑰屼笉鏄枃妗ｆ爲涓瓨鍦ㄧ殑鍏冪礌銆備緥濡傦紝鎮ㄥ彲浠ヤ娇鐢╬::first-line浼厓绱犳潵閫夋嫨娈佃惤鐨勭涓€琛岋紝鍗充娇娌℃湁浠讳綍HTML鍏冪礌鐜粫鏂囨湰琛屻€傚垱寤轰竴涓爣璁帮紝鍦ㄥ疄闄呭唴瀹瑰拰::before浼厓绱犱箣鍓嶏紝鍦ㄦ瘡涓垪琛ㄩ」鍏冪礌鍐呰嚜鍔ㄧ敓鎴愪竴涓?:marker浼厓绱犳爣璁版銆俵i::before{鍐呭锛氣€?:before鈥濓紱鑳屾櫙锛氭祬鐏拌壊锛涜竟鐣屽崐寰勶細1ch锛涘唴宓屽～鍏咃細1ch锛沵argin-inline-end:1ch;}閫氬父锛屽垪琛ㄩ」鏄?li>HTML鍏冪礌锛屼絾鍏朵粬鍏冪礌涔熷彲浠ラ€氳繃display:list-item鎴愪负鍒楄〃椤广€?dl>鐢崇綉锝滅編鍥㈠垱涓歂o.1锛氱帇鍏磋鈥滆繖鍦轰粭涓€瀹氳璧⑩€?/dt>L澶栧獟锛氱編鍥藉鍗庝负鐨勫埗瑁佸嚭鐜版嫄鐐圭編鍥芥垨鍏佽閮ㄥ垎鍏徃鎻愪緵闈?G闆堕儴浠?/dd>iPhone12涓嶅埌涓€鍛ㄥ氨鍧忎簡缁忛攢鍟嗭細5G濂楅鍙渷1300澶氬厓WMMotor鑷噧浜嬩欢缁細瀹樻柟鎵胯缂洪櫡鐢垫睜鍙洖鍗犳€婚攢閲?.6%iPhone鑳屽悗鐨勫帤濉戞枡鎯咃細瀵屽＋搴锋嫈鑻规灉姣涳紝搴撳厠鍋峰伔鎵惧鑳?/dd>dd{鏄剧ず锛氬垪琛ㄩ」锛涘垪琛ㄦ牱寮忕被鍨嬶細鈥滒煠€濓紱padding-inline-start:1ch;}markerstyle鍦ㄤ娇鐢?:marker涔嬪墠锛屽垪琛ㄥ彲浠ヤ娇鐢╨ist-style-type鍜宭ist-style-image鏉ユ敼鍙樺垪琛ㄩ」鐨勭鍙凤紝鍙渶浣跨敤涓€琛孋SS銆俵i{list-style-image:url(/right-arrow.svg);/*鎴?/list-style-type:'馃憠';padding-inline-start:1ch;}杩欏緢鏂逛究锛屼絾鎴戜滑闇€瑕佹洿澶氥€傛洿鏀归鑹层€佸ぇ灏忋€侀棿璺濈瓑绛夛紒杩欏氨鏄?:marker鐨勭敤姝︿箣鍦帮紝瀹冨厑璁歌繖浜涗吉鍏冪礌鍦–SS涓崟鐙垨鍏ㄥ眬瀹氫綅銆俵i::marker{color:hotpink;}li:first-child::marker{font-size:5rem;}璀﹀憡锛氬鏋滀笂闈㈢殑鍒楄〃娌℃湁绮夎壊椤圭洰绗﹀彿锛屽垯鎮ㄧ殑娴忚鍣ㄤ笉鏀寔::marker銆俵ist-style-type灞炴€ф彁渚涚殑鏍峰紡鍙兘鎬ч潪甯告湁闄愩€?:marker浼厓绱犳剰鍛崇潃鎮ㄥ彲浠ュ畾浣嶆爣璁版湰韬苟鐩存帴瀵瑰叾搴旂敤鏍峰紡锛岃繖鏍峰彲浠ヨ繘琛屾洿澶氭帶鍒躲€備篃灏辨槸璇达紝鎮ㄤ笉鑳藉湪::marker涓婁娇鐢ㄦ瘡涓狢SS灞炴€с€傚厑璁稿拰涓嶅厑璁哥殑灞炴€у垪琛ㄥ湪瑙勮寖涓槑纭寚鍑猴紝濡傛灉鎮ㄥ皾璇曚娇鐢ㄦ浼厓绱犲仛涓€浜涙湁瓒ｇ殑浜嬫儏浣嗘病鏈夋垚鍔燂紝涓嬮潰鐨勫垪琛ㄦ槸鎮ㄤ娇鐢–SS鍙互鍋氫粈涔堝拰涓嶈兘鍋氫粈涔堢殑鎸囧崡銆傚厑璁哥殑CSS::marker灞炴€nimation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space鏇存敼::marker鐨勫唴瀹规槸閫氳繃鍐呭鑰屼笉鏄垪琛ㄦ牱寮忕被鍨嬪畬鎴愮殑銆傚湪涓嬩竴涓ず渚嬩腑锛岀涓€椤圭殑鏍峰紡涓簂ist-style-type锛岀浜岄」鐨勬牱寮忎负::marker銆傜涓€绉嶆儏鍐典笅鐨勫睘鎬ч€傜敤浜庢暣涓垪琛ㄩ」锛岃€屼笉浠呬粎鏄爣璁帮紝杩欐剰鍛崇潃鏂囨湰鍜屾爣璁伴兘琚姩鐢诲寲浜嗐€備娇鐢?:marker鏃讹紝鎴戜滑鍙互鍙畾浣嶆爣璁版鑰屼笉鏄枃鏈€傚彟璇锋敞鎰忥紝涓嶅厑璁哥殑鑳屾櫙灞炴€ф棤鏁堛€侺istStyleli:nth-child(1){list-style-type:'?';瀛椾綋澶у皬锛?rem锛涜儗鏅細hsl(20020%88%)锛涘姩鐢伙細棰滆壊鍙樺寲3s鏃犻檺缂撳叆缂撳嚭锛泒鏍囪鏍峰紡li:nth-child(2)::marker{content:'!';瀛椾綋澶у皬锛?rem锛涜儗鏅細hsl(20020%88%)锛涘姩鐢伙細棰滆壊鍙樺寲3s鏃犻檺缂撳叆缂撳嚭锛泒鏇存敼鏍囪鐨勫唴瀹逛笅闈㈡槸涓€浜涜缃爣璁版牱寮忕殑鏂规硶銆傛洿鏀规墍鏈夊垪琛ㄩ」li{list-style-type:"馃槏";}/*OR*/li::marker{content:"馃槏";}浠呮洿鏀逛竴涓垪琛ㄩ」li:last-child::marker{content:"馃槏";}灏嗗垪琛ㄩ」鏇存敼涓篠VGli::marker{content:url(/heart.svg);鍐呭锛氱綉鍧€锛?heart锛夛紱鍐呭锛歶rl("data:image/svg+xml;charset=UTF-8,<璺緞d='M1221.35l-1.45-1.32C5.415.36212.28285525.424.423C1.7403.41.814.52.09C13.093.8114.76316.532225.47-3.5551.54L1221.35Z'Fill='none'stroke='hotpink'stroke-width='3'/>");}鏇存敼缂栧彿鍒楄〃鍛紵榛樿鎯呭喌涓嬶紝鏈夊簭鍒楄〃椤逛笂鐨勬爣璁版槸鏁板瓧锛岃€屼笉鏄」鐩鍙枫€傚湪CSS涓紝杩欎簺鍑芥暟琚О涓鸿鏁板櫒锛屽畠浠潪甯稿己澶с€傚畠浠敋鑷冲叿鏈夎缃拰閲嶇疆鏁板瓧寮€濮嬪拰缁撴潫浣嶇疆鐨勫睘鎬э紝鎴栬€呭皢瀹冧滑鍒囨崲涓虹綏椹暟瀛椼€傛垜浠彲浠ヨ璁″畠鍚楋紵鏄殑锛屾垜浠敋鑷冲彲浠ヤ娇鐢ㄦ爣璁板唴瀹瑰€兼潵鏋勫缓鎴戜滑鑷繁鐨勭紪鍙疯〃绀恒€俵i::marker{鍐呭锛氳鏁板櫒锛堝垪琛ㄩ」锛夆€溾€衡€濓紱color:hotpink;}璋冭瘯ChromeDevTools宸插噯澶囧ソ甯姪鎮ㄦ鏌ャ€佽皟璇曞拰淇敼搴旂敤浜?:marker浼厓绱犵殑鏍峰紡銆傛湭鏉ョ殑浼厓绱犳牱寮忔偍鍙互鍦ㄦ澶勬壘鍒版湁鍏?:marker鐨勬洿澶氫俊鎭細鏉ヨ嚜SmashingMagazine鐨凜SS鍒楄〃銆佹爣璁板拰璁℃暟鍣ㄤ娇鐢ㄦ潵鑷狢SS-Tricks鐨凜SS璁℃暟鍣ㄥ拰CSS缃戞牸杩涜璁℃暟浣跨敤鏉ヨ嚜MDN鐨凜SS璁℃暟鍣ㄨ闂竴浜涢潪甯稿洶闅剧殑鏍峰紡瀹冩槸鑳藉涓轰簨鐗╄缃牱寮忕湡鏄お濂戒簡锛屾偍鍙兘甯屾湜鍙互涓哄叾浠栬嚜鍔ㄧ敓鎴愮殑鍏冪礌璁剧疆鏍峰紡銆傛偍鍙兘浼氬鎴栨悳绱㈣緭鍏ヨ嚜鍔ㄥ畬鎴愭寚绀哄櫒鎰熷埌娌抚锛屽畠浠湪涓嶅悓娴忚鍣ㄤ腑鐨勫疄鐜版柟寮忎笉鍚屻€傚師鏂囷細https://web.dev/css-marker-ps...寰俊鎼滅储銆愬墠绔叏鏍堝紑鍙戣€呫€戝叧娉ㄨ繖浣嶆帀澶村彂銆佹憜鍦版憡銆佸崠璐с€佺户缁仛涓嬪幓鐨勭▼搴忓憳瀛︿範锛岀涓€鏃堕棿闃呰鏈€鏂版枃绔犮€傝繖涓ゅぉ浼氫紭鍏堝彂甯冩柊鏂囩珷銆傚叧娉ㄥぇ绀煎寘锛岃浣犵渷閽憋紒
