éæ©å¨ ä¾å æè¿°
.class .intro éæ© class="intro" çææå
ç´ ã
#id #firstname éæ© id="firstname" çææå
ç´ ã
* * éæ©ææå
ç´ ã
element p éæ©ææ <p> å
ç´ ã
element,element div,p éæ©ææ <div> å
ç´ åææ <p> å
ç´ ã
element element div p éæ© <div> å
ç´ å
é¨çææ <p> å
ç´ ã
element>element div>p éæ©ç¶å
ç´ ä¸º <div> å
ç´ çææ <p> å
ç´ ã
element+element div+p éæ©ç´§æ¥å¨ <div> å
ç´ ä¹åçææ <p> å
ç´ ã
[attribute] [target] éæ©å¸¦æ target å±æ§ææå
ç´ ã
[attribute=value] [target=_blank] éæ© target="_blank" çææå
ç´ ã
[attribute~=value] [title~=flower] éæ© title å±æ§å
å«åè¯ "flower" çææå
ç´ ã
[attribute|=value] [lang|=en] éæ© lang å±æ§å¼ä»¥ "en" å¼å¤´çææå
ç´ ã
:link a:link éæ©æææªè¢«è®¿é®çé¾æ¥ã
:visited a:visited éæ©ææ已被访é®çé¾æ¥ã
:active a:active éæ©æ´»å¨é¾æ¥ã
:hover a:hover éæ©é¼ æ æéä½äºå
¶ä¸çé¾æ¥ã
:focus input:focus éæ©è·å¾ç¦ç¹ç input å
ç´ ã
:first-letter p:first-letter éæ©æ¯ä¸ª <p> å
ç´ çé¦åæ¯ã
:first-line p:first-line éæ©æ¯ä¸ª <p> å
ç´ çé¦è¡ã
:first-child p:first-child éæ©å±äºç¶å
ç´ ç第ä¸ä¸ªåå
ç´ çæ¯ä¸ª <p> å
ç´ ã
:before p:before å¨æ¯ä¸ª <p> å
ç´ çå
容ä¹åæå
¥å
容ã
:after p:after å¨æ¯ä¸ª <p> å
ç´ çå
容ä¹åæå
¥å
容ã
element1~element2 p~ul éæ©åé¢æ <p> å
ç´ çæ¯ä¸ª <ul> å
ç´ ã
[attribute^=value] a[src^="https"] éæ©å
¶ src å±æ§å¼ä»¥ "https" å¼å¤´çæ¯ä¸ª <a> å
ç´ ã
[attribute$=value] a[src$=".pdf"] éæ©å
¶ src å±æ§ä»¥ ".pdf" ç»å°¾çææ <a> å
ç´ ã
[attribute*=value] a[src*="abc"] éæ©å
¶ src å±æ§ä¸å
å« "abc" å串çæ¯ä¸ª <a> å
ç´ ã
:first-of-type p:first-of-type éæ©å±äºå
¶ç¶å
ç´ çé¦ä¸ª <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ã
:last-of-type p:last-of-type éæ©å±äºå
¶ç¶å
ç´ çæå <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ã
:only-child p:only-child éæ©å±äºå
¶ç¶å
ç´ çå¯ä¸åå
ç´ çæ¯ä¸ª <p> å
ç´ ã
:nth-child(n) p:nth-child(2) éæ©å±äºå
¶ç¶å
ç´ ç第äºä¸ªåå
ç´ çæ¯ä¸ª <p> å
ç´ ã
:nth-last-child(n) p:nth-last-child(2) åä¸ï¼ä»æåä¸ä¸ªåå
ç´ å¼å§è®¡æ°ã
:nth-of-type(n) p:nth-of-type(2) éæ©å±äºå
¶ç¶å
ç´ ç¬¬äºä¸ª <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ã
:nth-last-of-type(n) p:nth-last-of-type(2) åä¸ï¼ä½æ¯ä»æåä¸ä¸ªåå
ç´ å¼å§è®¡æ°ã
:last-child p:last-child éæ©å±äºå
¶ç¶å
ç´ æåä¸ä¸ªåå
ç´ æ¯ä¸ª <p> å
ç´ ã
:empty p:empty éæ©æ²¡æåå
ç´ çæ¯ä¸ª <p> å
ç´ ï¼å
æ¬ææ¬èç¹ï¼ã
:target #news:target éæ©å½åæ´»å¨ç #news å
ç´ ã
:enabled input:enabled éæ©æ¯ä¸ªå¯ç¨ç <input> å
ç´ ã
:disabled input:disabled éæ©æ¯ä¸ªç¦ç¨ç <input> å
ç´
:checked input:checked éæ©æ¯ä¸ªè¢«éä¸ç <input> å
ç´ ã
:not(selector) :not(p) éæ©é <p> å
ç´ çæ¯ä¸ªå
ç´ ã
追é®æ¦å¿µæ§çé®é¢
ä¸éè¦åç代ç
追çä½ çé®é¢âåä¸¾ä½ ç¥éçCSSéæ©å¨åå
¶ç¨æ³âï¼
æ¦å¿µæ§çé®é¢ï¼åçä¸å代ç æ¥åçä½ çé®é¢çé«äººåºç°å§
追é®é¢
ä¸è¡åï¼
æ¯å¦è¯´idç±»éæ©å¨æ¯å¯¹äºéè¦å¯ä¸æ è¯ç页é¢å
ç´ ï¼åå¯ä»¥ä½¿ç¨idéæ©å¨
æ è®°éæ©å¨å³ç´æ¥ä½¿ç¨HTMLæ è®°åä½ä¸ºéæ©å¨ï¼å¥¹å®ä¹çæ ·å¼ä½ç¨äºé¡µé¢ä¸ææä¸éæ©å¨ååçæ è®°ã
æ è®°éæ©å¨å³ç´æ¥ä½¿ç¨HTMLæ è®°åä½ä¸ºéæ©å¨ï¼å®å®ä¹çæ ·å¼ä½ç¨äºé¡µé¢ä¸ææä¸éæ©å¨ååçæ è®°ã
ç±»éæ©å¨ï¼ä»»ä½åæ³çHTMLæ è®°é½å¯ä»¥ä½¿ç¨classå±æ§ï¼classå±æ§ç¨äºå®ä¹é¡µé¢ä¸çHTMLå
ç´ æ è®°ç»ï¼è¿äºæ è®°ç»é常å
·æç¸åçåè½æä½ç¨ï¼å æ¤å®ä»¬å¯ä»¥è®¾ç½®ç¸åçæ ·å¼è§å
è¡åï¼
追çåªè½å¯¹ä½ åµåµäº
追é®å°±æ¯ä¸é¢ææ«èè¯çé¢
ä½ è¿è§£çï¼é½å äºé¡µçº¸äº
å°±æ¯ä¸é¢ææ«èè¯çé¢ç®
追ç好å§......