די סטרוקטור פון אַ HTML דאָקומענט איז ענלעך צו אַ משפּחה בוים. אין דיין משפּחה, איר האָט דיין עלטערן און אנדערע וואס זענען געקומען פֿאַר איר. דאס זענען דיין אָוועס. קינדער און די וואס קומען נאָך איר אויף דעם בוים זענען דיין קינדסקינדער. HTML אַרבעט אין אַ ענלעך מאָדע. עלעמענטן וואָס זענען ין פון אנדערע יסודות זענען זייער קינדסקינדער. למשל, זינט קימאַט יעדער HTML עלעמענט איז ין פון
טאַגס, זיי וואָלט זיין אַ אָפּשטאַמלינג פון וואָס <גוף> עלעמענטן. דעם שייכות איז וויכטיק צו פֿאַרשטיין ווען איר אָנהייב ארבעטן מיט קסס און דאַרפֿן צו ציל ספּעציפיש יסודות צו צולייגן וויזשאַוואַל סטיילז.קסס דעסקענדאַנט סעלעקטאָרס
א CSS אָפּשטענדלער סעלעקטאָר אַפּלייז צו די עלעמענטן אַז ביסט ין אן אנדער עלעמענט (אָדער מער אַקיעראַטלי סטייטיד, אַן עלעמענט וואָס איז אַ אָפּשטאַמלינג פון אנדערן עלעמענט). למשל, אַ ונאָרדערעד רשימה האט אַ צעטל מיט טאַגס ווי קינדסקינדער. זאל אונדז נוצן די ווייַטערדיק HTML ווי אַ בייַשפּיל:
- this is a link
די לי טאַגס זענען קינדסקינדער פון די אַל-טאַג. די א צעטל איז אַ אָפּשטאַמלינג פון ביידע די לי (קינד אָפּשטאַמלינג) און אַל (גראַנדטשילד אָפּשטאַמלינג) טאַגס. אויב איר טראַכטן וועגן דעם טראַכטן וועגן דעם ניצן די משפּחה בוים בייַשפּיל, די
- וואָלט זיין דער פאָטער, די <לי> וואָלט זיין אַז עלעמענט 'ס קינד, און די <אויסטרע איז דער קינד פון די <לי> און די גראַנדטשילד פון די
- .
אַזוי, ווי וואָלט איר צילן ספּעציפיש עלעמענטן אין אַ וועב בלאַט ניצן די אָפּשטאַמלינג סעלעקטערז? קודם, איר האָבן צו באַשליסן אָפּשטאַמלינג סעלעקטאָרס ניצן צוויי (אָדער מער) טיפּ סעלערז אפגעשיידט דורך ספּייסאַז.
אַ {טעקסט-באַפּוצונג: גאָרניט; }אין דעם בייַשפּיל, די סטיילז וואָלט נאָר אַפּלייז צו אַ לינק עלעמענט () וואָס איז אַ אָפּשטאַמלינג פון אַ רשימה-פּונקט עלעמענט (<לי>). אַלע אנדערע לינקס אויף דעם בלאַט וואָס זענען נישט אַ אָפּשטאַמלינג פון אַ רשימה נומער וואָלט נישט באַקומען דעם סטיל.
איינער וויכטיק זאַך צו געדענקען איז אַז עס טוט נישט ענין ווי פילע טאַגס זיי זענען צווישן די טאַגס איר קען נוצן אין דיין אָפּשטאַמלינג סעלעקטאָר. אויב דער רגע עלעמענט איז אַרייַנגערעכנט ערגעץ אין דער ערשטער עלעמענט עס וועט זיין אויסגעקליבן ווי אַ קינד.
אויב איר ווילן צו אויסקלייַבן אַלע אַנגקערז וואָס זענען אראפגענומען פון אַל יסודות, איר וואָלט שרייַבן:
אַ {טעקסט-באַפּוצונג: גאָרניט; }איצט, די סטיילז וועלן צולייגן צו קיין לינק וואָס איז אַ אָפּשטאַמלינג פון אַ רשימה נומער. איר קען אויך שרייַבן דעם סעלעקטאָר
עס איז אַ {טעקסט-באַפּוצונג: גאָרניט; }דעם איז אַ אָפּשטאַמלינג סעלעקטאָר וואָס ניצט מער ווי צוויי טיפּ סעלעקטאָרס. אין דעם פאַל, דאָס וואָלט זיין געוויזן צו לינקס וואָס זענען אינעווייניק ווי ליסט-ייטאַמז און אויך ין אַ ונאָרדערעד רשימה.
ניצן קלאַס סעלעקטאָרס און שייַן סעלעקטאָרס
די סעלערז וואָס איר ניטאָ אַראָפּגיין פון טאָן ניט האָבן צו שטענדיק זייַן טיפּ קינדסקינדער. פֿאַר בייַשפּיל, ימאַדזשאַן איר האָבן אַ געגנט פון דעם פּלאַץ (ווי אַ אָפּטייל) מיט אַ שייַן אַטריביוט פון "בילבאָרד". איר קען שטעלן זיך אַ אָפּצאָל סעלעקטאָר אַוועק פון אַז שייַן:
#ביללבאָאַרד ווו {background-color: #ccc; }דעם וואָלט סטיל די ונאָרדערעד רשימה אַז איז אַ אָפּשטאַמלינג פון אַן עלעמענט מיט אַ שייַן פון "בילבאָרד". איר קענען טאָן די זעלבע פֿאַר קלאַס וואַלועס.
div.billboard ul {background-color: # ccc; }דעם אַסומז אַז די אָפּטייל האט אַ קלאַס ווערט פון "בילבאָרד". די CSS אויבן וואָלט נוסח די
- עלעמענט אינעווייניק פון קיין טייל וואָס האט דעם סאָרט ווערט.
איר קענען באַקומען טאַקע שווער-קאָלנער און ווערבאָוז מיט אָפּשטאַמלינג סעקטאָרס. פֿאַר בייַשפּיל, אויב איר נוצן Dreamweaver צו שרייַבן דיין HTML קאָד , עס איז אַ באַשטעטיקן ווען איר שטעלן נייַע CSS כּללים וואָס וועט אַוטאָ-שאַפֿן די סעלעקטאָר ביי די פּלייסמאַנט פון דיין לויפֿער אויף דעם בלאַט. וואָס דרעאַמוועאַווער טוט אין דעם ינסטאַנסיז איז שאַפֿן אַ ווילדלי ווערבאָוזע און לאַנג אָפּשטאַמלינג סעלעקטאָר. אַז פיל ספּעסאַפיסאַטי איז ניט נייטיק פֿאַר דיין קסס צו אַרבעטן. וואָס איר ווילן צו טאָן איז find a balance between a descendant selector that is specifically so that you can drill down to the exact elements you need (without styling ones you do not want to affect) without having CSS rules that have selectors that are overly גרויס.