鐨勮繖鏉¤鍒欙紝骞跺簲鐢ㄥ埌鐨勭涓€琛屽厓绱犱笂鏈韩锛岃鐩栧師鏉ョ殑ID閫夋嫨瀹瑰櫒涓畾涔夌殑棰滆壊锛氱豢鑹层€傚啀楠岃瘉涓€涓嬶紝杩樻湁涓€涓瘮杈冭糠鎯戠殑鍦版柟灏辨槸涓轰粈涔圛D閫夋嫨鍣ㄧ殑浼樺厛绾т綆浜?:first-line閫夋嫨鍣ㄣ€傝鎴戜滑鍋氫竴浜涚畝鍗曠殑灏濊瘯锛氫笅闈㈢殑DEMO灞曠ず浜?:first-line鏍峰紡鍜屽悇绉嶉€夋嫨鍣ㄤ竴璧峰伐浣滄椂鐨勪紭鍏堢骇姣旇緝锛岀敋鑷冲寘鎷?important瑙勫垯锛氱涓€娈佃鏍囩閫夋嫨鍣ㄨ缃负鐏拌壊绗?娈垫槸Paragraph3琚玞lass閫夋嫨鍣ㄥ彉鐏癙aragraph3琚獻D閫夋嫨鍣ㄥ彉鐏癙aragraph4琚?importantbash鍙樼伆缁间笂鎵€杩帮紝鎴戜滑杩樹负姣忎釜娈佃惤浣跨敤浜?:first-line閫夋嫨鍣ㄣ€?h2>::first-linevs.tag閫夋嫨鍣?/h2>

Thisparagraph...

::first-linevs.class閫夋嫨鍣?/h2>Thisparagraphcolori...

::first-linevsID閫夋嫨鍣?/h2>Thisparagraphcolorisset...

::first-linevs!important

杩欎竴娈电殑棰滆壊鏄?...

p{color:#444;}p::first-line{color:deepskyblue;}.p2{color:#444;}.p2::first-line{color:tomato;}#p3{color:#444;}#p3::first-line{color:firebrick;}#p4{color:#444!important;}#p4::first-line{color:hotpink;}CodePenDemo--::first-line:demo鐪嬫晥鏋滐細鍙互鐪嬪埌鏃犺閫夋嫨鍣ㄦ槸浠€涔堬紝閮芥湁娌℃湁浼樺厛绾э細锛氱涓€绾挎槸楂樸€傚師鍥犳槸::first-line鍏跺疄鏄吉鍏冪礌鑰屼笉鏄吉绫汇€傚畠閫変腑鐨勫唴瀹瑰疄闄呬笂浼氳褰撲綔鍏冪礌鐨勫瓙鍏冪礌锛岀被浼间簬::before鍜?:after銆傚洜姝わ紝瀵逛簬鐖跺厓绱犵殑棰滆壊瑙勫垯锛屽彧鏄竴绉嶇骇鑱斿叧绯伙紝::first-line鏈韩瀹氫箟鐨勮鍒欏叿鏈夋洿楂樼殑浼樺厛绾э紒杩欏氨鏄负浠€涔堬紝鍦∕DN鏂囨。涓紝鏇存帹鑽愬弻鍐掑彿鐨勫啓娉曪紙褰撶劧锛屾祻瑙堝櫒鏀寔鍗曞啋鍙风殑鍐欐硶锛?-MDN--::first-line鍙﹀涓€涓棶棰橈紝MDN鐨勯敊璇ず渚嬶紵涓€涓湁瓒ｇ殑鐜拌薄缁撴潫浜嗕笂闈㈢殑闂銆傛垜浠啀鏉ョ湅涓€涓棶棰橈紝闈炲父鐩镐技銆傚湪浠嬬粛:not鐨凪DN椤甸潰涓婏紝鏈夎繖鏍蜂竴涓緥瀛愶細/*SelectsanyelementthatisNOTaparagraph*/:not(p){color:blue;}鎰忔€濇槸锛?not(p)鍙互閫夋嫨浠讳綍涓嶆槸娈佃惤鐨勫厓绱犱笉鏄爣绛剧殑

鍏冪礌銆備絾鏄紝涓婇潰鐨凜SS閫夋嫨鍣紝鍦ㄤ笅闈㈢殑HTML缁撴瀯涓紝娴嬪嚭鏉ョ殑缁撴灉涓嶅お瀵广€?p>p

div

span

h1

缁撴灉濡備笅锛欳odePenDemo--:notpesudodemo鐨勬剰鎬濓紝:not(p)浠嶇劧閫夋嫨

鍏冪礌銆傛槸鐨勶紝鍦ㄥ涓祻瑙堝櫒涓紝寰楀埌鐨勬晥鏋滄槸涓€鑷寸殑銆傜湅鍒拌繖閲岋紝浣犲彲浠ュ仠涓嬫潵鎯充竴鎯充负浠€涔?p>鍏冪礌鐨勯鑹茶繕鏄痗olor:blue锛熶负浠€涔堟槸杩欐牱锛熺瓟锛氳繖鏄洜涓猴細not(p)涔熷彲浠ラ€変腑锛岄偅涔?body>鐨勯鑹插氨鍙樻垚浜嗚摑鑹层€傜敱浜庨鑹叉槸鍙户鎵跨殑灞炴€э紝

鏍囩缁ф壙浜?body>鐨勯鑹插睘鎬э紝瀵艰嚧鐪嬪埌鐨?p>涔熸槸钃濊壊鐨勩€傝鎴戜滑鎶婂畠鏀规垚涓€涓笉鍙户鎵跨殑灞炴€э紝璇曡瘯鐪嬶細/*SelectsanyelementthatisNOTaparagraph*/:not(p){border:1pxsolid;}OK锛岃繖娆?p>娌℃湁杈规锛屾病闂锛佹墍浠ワ紝鍦ㄥ疄闄呬娇鐢ㄤ腑锛岄渶瑕佹敞鎰忔牱寮忕户鎵跨殑闂锛佹渶鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>