css伪类选择器怎么用 如何理解这种CSS伪类选择器？
css3\u600e\u4e48\u7528\u4f2a\u7c7b\u9009\u62e9\u5668\u4e0d\u8981\u7b2c\u4e00\u4e2a\u4e00\u3001X:nth-child(n) li:nth-child(3) { color: red;}\u63a5\u4e0b\u6765\u7684\u51e0\u4e2a\u4f2a\u7c7b\u9009\u62e9\u5668\u4f7f\u7528\u4e0a\u975e\u5e38\u7c7b\u4f3c\uff0c\u529f\u80fd\u4e5f\u6bd4\u8f83\u63a5\u8fd1\u3002 :nth-child(n)\uff0c\u7528\u4e8e\u5339\u914d\u7d22\u5f15\u503c\u4e3an\u7684\u5b50\u5143\u7d20\u3002\u7d22\u5f15\u503c\u4ece1\u5f00\u59cb\u3002 X:nth-child()\u7528\u6cd5\u5b9e\u9645\u4e0a\u6709\u4e09\u79cd\u53d8\u5316\uff0cdemo\u7684\u7528\u6cd5\u662f\u6700\u7b80\u5355\u7684\uff0cX:nth-child()\u66f4\u5f3a\u5927\u7684\u7528\u5904\u5728\u4e8e\u5947\u5076\u5339\u914d\uff0c\u660e\u6cb3\u4e0d\u5c55\u5f00\u8bb2\uff0c\u6709\u5174\u8da3\u7684\u8bf7\u770b\u300aUnderstanding :nth-child Pseudo-class Expressions\u300b,\u300aCSS3 :nth-child()\u4f2a\u7c7b\u9009\u62e9\u5668\u300b \u4e8c\u3001X:nth-last-child(n) li:nth-last-child(2) { color: red;}:nth-child(n)\uff0c\u662f\u4ece\u7b2c\u4e00\u4e2a\u5f00\u59cb\u7b97\u7d22\u5f15\uff0c\u800cX:nth-last-child(n)\u662f\u4ece\u6700\u540e\u4e00\u4e2a\u5f00\u59cb\u7b97\u7d22\u5f15\u3002
\u9996\u5148\uff0c*:first-child\u8fd9\u4e2a\u4f2a\u7c7b\u7684\u4f5c\u7528\u662f\u5339\u914d*\u8fd9\u4e2a\u6807\u7b7e\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u3002\u4f46\u662f\u4e8b\u5b9e\u4e0a\uff0c\u6709\u7684\u6d4f\u89c8\u5668\u5e76\u6ca1\u6709\u8fd9\u6837\u7684\u89e3\u91ca\u8fd9\u4e2a\u4f2a\u7c7b\u3002\u6240\u4ee5\u4e3a\u4e86\u51c6\u786e\u4e0d\u51fa\u9519\uff0c\u6211\u4eec\u9700\u8981\u53e6\u5916\u4e00\u4e2a\u9009\u62e9\u5668*>*\uff1afirst-child\u3002\u6bd4\u5982\uff0cp>i:first-child\u8fd9\u4e2a\u9009\u62e9\u5668
\u53ef\u4ee5\u5339\u914d\u9009\u62e9\u5668\u6837\u5f0f
\u6b63\u5e38\u663e\u793a
\u6b63\u5e38\u663e\u793a
注意：伪类选择器hover 可以作用于所有元素，不仅仅是链接。
与hover类似的选择器还有link，visited，active。 link 选择器可以设置未被访问过的链接样式， visited 选择器可以设置已被访问过的链接样式，active选择器可以设置被激活的链接样式。不清楚的同学可以参考 CSS视频教程。
用法1：当鼠标经过链接时改变其自身的样式（hover后面直接接样式）
描述：当鼠标经过时，a标签的字体颜色变为红色，字体变大，
用法2：用伪类选择器hover控制其子元素的样式（hover后面加空格再接要改变元素的样式）
描述：当鼠标经过时div时，其子元素的颜色变为紫色，字体变大，出现红色边框，
用法3：当鼠标经过时控制其兄弟元素的样式（hover后面加“+”再接要改变元素的样式）
描述：鼠标经过时其兄弟元素的背景颜色变为黄色，字体变大，
绛旓細1銆佸姩鎬浼被閫夋嫨鍣 涓嶅悓鐨勭姸鎬侊紝浣跨敤涓嶅悓鐨勬牱寮忋侲: link E: visited E: active E: hover E: focus 2銆佺洰鏍囦吉绫婚夋嫨鍣 鐢ㄦ潵鍖归厤椤甸潰鐨刄RI涓煇涓爣璇嗙鐨勭洰鏍囧厓绱犮侲: target 閫夋嫨鍖归厤E鐨勬墍鏈夊厓绱狅紝涓斿尮閰嶅厓绱犺鐩稿叧URL鎸囧悜銆3銆佽瑷浼被閫夋嫨鍣 鐢ㄦ潵鍖归厤浣跨敤鎸囧畾璇█鐨勫厓绱犮侲: lang(language)4...
绛旓細CSS浼被鎸囩殑鏄敤浜庨夋嫨缃戦〉鏂囨。涓煇浜涚壒瀹氱姸鎬佹垨浣嶇疆鐨閫夋嫨鍣銆傛瘮濡:hover浼被鐢ㄤ簬閫夋嫨鐢ㄦ埛鎮仠鍦ㄦ煇涓厓绱犱笂鐨勭姸鎬侊紝:active浼被鐢ㄤ簬閫夋嫨鐢ㄦ埛鍦ㄧ偣鍑绘煇涓厓绱犳椂鐨勭姸鎬併浣跨敤浼被鍙互浣挎枃妗ｇ殑鏍峰紡鏇村姞鐏垫椿澶氬彉锛屼娇寰楃綉椤电殑浜や簰鏁堟灉鏇村姞鐢熷姩銆備吉绫荤殑浣跨敤甯稿父鍜孞avaScript绛夎剼鏈瑷鐩哥粨鍚堛傞氳繃鍦ㄤ吉绫讳腑璋冪敤JavaScript...
绛旓細浼被閫夋嫨鍣鍒嗕负缁撴瀯鎬с佸瓙鍏冪礌銆 UI銆佸姩鎬佸拰鍏跺畠浼被閫夋嫨鍣ㄥ娉:涓轰簡鏇村ソ鐨勫尯鍒嗕吉绫诲拰浼厓绱,涔﹀啓涓CSS鍋氫簡鍖哄垎銆備緥濡,浼被 :first-child;浼厓绱 鍦ㄤ笅闈㈢殑绀轰緥涓:div > p:only-child{color:red; //涓嶅彉绾div > p:only-of-type{color:red; //鍙樼孩}test1test2ul > li:nth-child(2){color:red; //...
绛旓細浼厓绱犳槸瀵瑰厓绱犱腑鐨勭壒瀹氬唴瀹硅繘琛屾搷浣滐紝瀹冩墍鎿嶄綔鐨勫眰娆℃瘮浼被鏇存繁浜嗕竴灞傦紝涔熷洜姝ゅ畠鐨勫姩鎬佹ф瘮浼被瑕佷綆寰楀銆傝璁′吉鍏冪礌鐨勭洰鐨勫氨鏄幓閫夊彇璇稿鍏冪礌鍐呭绗竴涓瓧锛堟瘝锛夈佺涓琛岋紝閫夊彇鏌愪簺鍐呭鍓嶉潰鎴栧悗闈㈣繖绉嶆櫘閫氱殑閫夋嫨鍣鏃犳硶瀹屾垚鐨勫伐浣溿傚畠鎺у埗鐨勫唴瀹瑰疄闄呬笂鍜屽厓绱犳槸鐩稿悓鐨勶紝浣嗘槸瀹冩湰韬彧鏄熀浜庡厓绱犵殑鎶借薄锛...
绛旓細:hover閫夋嫨鍣鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傚綋榧犳爣鎮仠鍦ㄥ厓绱犱笂鏃讹紝鍙浣跨敤姝ら夋嫨鍣ㄨ缃厓绱犵殑鏍峰紡锛涘畠鍙敤浜庢瘡涓厓绱犮傝娉曪細涓巋over鐩稿叧鐨浼被:鈼忋:hover 閫夋嫨鍣ㄥ彲鐢ㄤ簬鎵鏈夊厓绱狅紝涓嶄粎鏄摼鎺ャ傗棌銆:link 閫夋嫨鍣ㄨ缃簡鏈闂繃鐨勯〉闈㈤摼鎺ユ牱寮,鈼忋:visited 閫夋嫨鍣ㄨ缃闂繃鐨勯〉闈㈤摼鎺ョ殑鏍峰紡 鈼忋:...
绛旓細鍜屼竴鑸殑CSS璇硶涓嶅悓(鍙傝CSS璇硶)锛CSS浼被鐨勮娉曟湁涓ょ銆傜涓绉嶏細selector:pseudo-class {property: value} 渚嬪彞锛歛:link {color:red} 绗簩绉嶏細selector.class:pseudo-class {property: value} 渚嬪彞锛歛.c1:link {color:red} 閿(a)浼被 閿(a)浼被鏄渶甯哥敤鐨勪吉绫汇備緥鍙ュ涓嬶細a:link {color:...
绛旓細CSS浼被(Pseudoclasses)鏄閫夋嫨绗︾殑铻烘爴锛岀敤鏉ユ寚瀹氫竴涓垨鑰呬笌鍏剁浉鍏崇殑閫夋嫨绗︾殑鐘舵併傚畠浠殑褰㈠紡鏄痵elector:pseudoclass{property:value;}锛岀畝鍗曞湴鐢ㄤ竴涓崐瑙掕嫳鏂囧啋鍙(:)鏉ラ殧寮閫夋嫨绗﹀拰浼被銆侰SS寰堝鐨勫缓璁苟娌℃湁寰楀埌娴忚鍣ㄧ殑鏀寔锛屼絾鏈夊洓涓彲浠ュ畨鍏浣跨敤鐨勭敤鍦ㄨ繛鎺ヤ笂鐨凜SS浼被銆傗梿link鐢ㄥ湪涓鸿闂殑杩炴帴涓娿...
绛旓細鍦ㄩ〉闈腑浣跨敤CSS閫夋嫨鍣閫変腑鍏冪礌鏃讹紝缁忓父閮芥槸涓涓厓绱犲悓鏃惰澶氫釜閫夋嫨鍣ㄩ変腑銆 姣斿锛氳繖涓や釜閫夋嫨鍣ㄩ兘浼氶夋嫨h1鍏冪礌锛屽鏋滀袱涓夋嫨鍣ㄨ缃殑鏍峰紡涓嶄竴鏍烽偅杩樺ソ涓嶄細浜х敓鍐茬獊锛屼絾鏄鏋滀袱涓夋嫨鍣ㄨ缃殑鏄悓涓涓牱寮忥紝杩欐牱h1鍒板簳瑕佸簲鐢ㄥ摢涓牱寮忓憿锛烠SS涓細榛樿浣跨敤鏉冮噸杈冨ぇ鐨勬牱寮忥紝涓嬮潰鐪嬩竴涓嬫潈閲嶅張鏄浣...
绛旓細杩欐槸閫夋嫨鍣绉嶇殑涓绉嶏紝琛ㄧず绐佸嚭鏄剧ず娲诲姩鐨 HTML 閿氾紝姣斿锛css锛歱:target { border: 2px solid #D4D4D4;background-color: #e5eecc;} html:璺宠浆鑷冲唴瀹 1 璺宠浆鑷冲唴瀹 2 璇风偣鍑讳笂闈㈢殑閾炬帴锛:target 閫夋嫨鍣ㄤ細绐佸嚭鏄剧ず褰撳墠娲诲姩鐨 HTML 閿氥 鍐呭 1... 鍐呭 2... 璇存槑锛氶偅涔堝綋璺宠浆鑷冲唴瀹 1琚...
绛旓細3銆両D閫夋嫨鍣 瀹氫箟锛氫负HTML鏍囩娣诲姞ID灞炴э紝閫氳繃ID閫夋嫨鍣ㄦ潵涓哄叿鏈夋ID鐨勫厓绱犺缃CSS瑙勫垯 4銆佺兢缁勯夋嫨鍣 瀹氫箟锛氶泦浣撶粺涓璁剧疆鏍峰紡 5銆佸叏灞閫夋嫨鍣 瀹氫箟锛氭墍鏈夋爣绛捐缃牱寮 HTML鏂囨。缁撴瀯鍥 6銆佸悗浠ｉ夋嫨鍣 瀹氫箟锛浣跨敤鍚庝唬閫夋嫨鍣ㄨ缃紝涔嬮棿鐢ㄧ┖鏍奸殧寮锛屽悗浠ｉ夋嫨鍣ㄥ彲浠ュ灞傘7銆浼被閫夋嫨鍣 閾炬帴鐨勫洓绉嶇姸鎬侊細婵娲...
