גרופע Multiple CSS סעלעקטאָרס צו פֿאַרבעסערן לאָודינג גיכקייַט
עפעקטיווקייַט איז אַ וויכטיק פאַקטאָר אין אַ מצליח וועבזייטל. אַז פּלאַץ זאָל זיין עפעקטיוו אין ווי עס ניצט בילדער אָנליין . דאס וועט העלפֿן ענשור אַז די פּלאַץ פּערפאָרמז געזונט פֿאַר וויזאַטערז און מאַסע געשווינד אויף זייער דעוויסעס. עפעקטיווקייַט זאָל אויך זיין אַ טייל פון דיין קוילעלדיק פּראָצעס, העלפּינג איר צו האַלטן אַ פּלאַץ ס פּראָגרעס אויף צייַט און אויף בודזשעט.
אין די סוף, עפעקטיווקייַט איז אַ ראָלע אין אַלע אַספּעקץ פון שאפן וועבסיטעס און לאַנג טערמין הצלחה, אַרייַנגערעכנט אין די סטיילז וואָס זענען געשריבן פֿאַר די וועבזייטל CSS שיץ. זינען קענען מאַכן לעאַנער, קלינער קסס טעקעס איז ידעאַל, און איינער פון די וועגן איר קענען דערגרייכן דעם איז דורך גרופּינג קייפל קסס סעלעקטאָרס צוזאַמען.
גראָוינג סעלעקטאָרס
ווען איר גרופּע CSS סעלעקטאָרס , איר אַפּלייז די זעלבע סטיילז צו עטלעכע פאַרשידענע יסודות אָן ריפּיטינג די סטיילז אין דיין נוסח בלאַט. אַנשטאָט צוויי אָדער דרייַ אָדער מער CSS כּללים, אַלע וואָס טאָן די זעלבע זאַך (בייַשפּיל, שטעלן די קאָליר פון עפּעס צו רויט), איר האָבן אַ איין קסס הערשן וואָס ויספירן פֿאַר דיין בלאַט.
עס זענען אַ נומער פון סיבות וואָס דאָס "גרופּינג פון סעלעקטאָרס" בענעפיץ אַ בלאַט. ערשטער, דיין נוסח בלאַט וועט זיין קלענערער און מאַסע מער געשווינד. אַדמיטעד, סטיל שיץ זענען נישט איינער פון די הויפּט קולפּריט ווען עס קומט צו פּאַמעלעך לאָודינג זייטלעך. CSS טעקעס זענען טעקסט טעקעס, אַזוי אפילו טאַקע לאַנג קסס שיץ זענען קליינטשיק, טעקע-גרייס קלוג, ווען קאַמפּערד צו אַנאָופאַמייזד בילדער. נאָך, יעדער קליין ביסל קאַונץ, און אויב איר קענען גאָלן עטלעכע גרייס פון דיין קסס און מאַסע די בלעטער וואָס פיל פאַסטער, וואָס איז שטענדיק אַ גוט זאַך צו טאָן.
אין אַלגעמיין, אויבן די דורכשניטלעך מאַסע ספּידז פֿאַר זייטלעך זענען ווייניקער ווי 3 סעקונדעס; 3 צו 7 סעקונדעס איז וועגן דורכשניטלעך, און מער ווי 7 סעקונדעס איז פּונקט אויך פּאַמעלעך. די נידעריק נומערן מיינען אַז, צו דערגרייכן זיי מיט דיין פּלאַץ, איר דאַרפֿן צו טאָן אַלץ איר קענען! דאָס איז וואָס איר קענט העלפֿן האַלטן דיין פּלאַץ געשווינד ניצן גרופּעס CSS סעלעקטאָרס.
ווי צו גרופע קסס סעלעקטאָרס
צו גרופּע CSS סעלעקטאָרס צוזאַמען אין דיין נוסח בויגן, איר נוצן קאָמבאַס צו צעטיילן קייפל גרופּעד סעלעקטאָרס אין דעם סטיל. אין דעם בייַשפּיל אונטן, די נוסח אַפעקץ די פּ און דיוו עלעמענטן:
div, p {color: # f00; }די קאָמע באַסיקאַללי מיטל "און". אַזוי דעם סעלעקטאָר אַפּלייז צו אַלע פּאַראַגראַף עלעמענטן און אַלע אָפּטייל עלעמענטן. אויב די קאָמע איז פעלנדיק, עס וואָלט זיין אַלץ די פּאַראַגראַפס וואָס זענען אַ קינד פון אַ אָפּטייל. אַז איז אַ זייער אַנדערש טיפּ פון סעלעקטאָר, אַזוי דעם קאָמע טאַקע קען טוישן די טייַטש פון די סעלעקטאָר!
קיין פאָרעם פון סעלעקטאָר קענען זיין גרופּט מיט קיין אנדערע סעלעקטאָר. אין דעם בייַשפּיל, אַ סאָרט סעלעקטאָר איז גראָופּאַנד מיט אַ שייַן סעלעקטאָר:
p.red, #sub (color: # f00; }אַזוי דעם נוסח אַפּלייז צו קיין פּאַראַגראַף מיט די סאָרט אַטריביוט פון "רויט", און קיין עלעמענט (זינט מיר האט נישט ספּעציפיצירן וואָס סאָרט) וואָס האט אַ שייַן אַטריביוט פון "סאַב".
איר קענען צונויפרעכענען אַ נומער פון סעלערז צוזאַמען, אַרייַנגערעכנט סעלעקטערז וואָס זענען איין ווערטער און קאָמפּונד סעקטאָרס. דעם בייַשפּיל כולל פיר פאַרשידענע סעלעקטאָרס:
p, .red, # sub, div a: link {color: # f00; }אַזוי דעם קסס הערשן וואָלט צולייגן צו די פאלגענדע:
- קיין פּאַראַגראַף עלעמענט
- קיין עלעמענט מיט די קלאַס פון "רויט"
- קיין עלעמענט מיט אַן איד פון "סאַב"
- דער "לינק" פּסעוודאָ קלאַס פון די אַנקער עלעמענטן וואָס זענען דיסענדאַנץ פון אַ אָפּטייל.
אַז לעצטע סעלעקטאָר איז אַ קאַמפּאַונד סעלעקטאָר. איר קענען זען עס איז לייכט קאַמביינד מיט די אנדערע סעלערז אין דעם קסס הערשן. מיט דעם כּללים, מיר באַשטעטיקן דעם קאָליר פון # פ 00 (וואָס איז רויט) אויף די 4 סעלערז, וואָס איז בילכער צו שרייבן 4 באַזונדער סעלעקטאָרס צו דערגרייכן די זעלבע רעזולטאַט.
אן אנדער נוץ פון גרופּינג סעלעקטאָרס איז אַז, אויב איר דאַרפֿן צו מאַכן אַ ענדערונג, איר קענען רעדאַגירן איין קסס גערעכט, אַנשטאָט פון קייפל אָנעס. דעם מיטל אַז דעם צוגאַנג סאַוועס איר בלאַט וואָג און צייַט ווען עס קומט צו טייַנען דעם פּלאַץ אין דער צוקונפֿט.
קיין סעלעקטאָר קען זיין גראָופּעד
ווי איר קענען זען פון די אויבן ביישפילן, קיין גילטיק סעלעקטאָר קענען ווערן געשטעלט אין אַ גרופּע, און אַלע יסודות אין דעם דאָקומענט וואָס גלייַכן אַלע די גרופּעד עלעמענטן וועט האָבן די זעלבע נוסח באזירט אויף דעם נוסח פאַרמאָג.
עטלעכע מענטשן בעסער צו רשימה די גרופּעד עלעמענטן אויף באַזונדער שורות פֿאַר לעגאַביליטי אין די קאָד. דער אויסזען אויף דעם וועבזייַטל און די מאַסע גיכקייַט בלייבט די זעלבע. למשל, איר קענען קאַמביינד סטיילז אפגעשיידט דורך קאָממאַס אין איין נוסח פאַרמאָג אין איין שורה פון קאָד:
th, td, p.red, div # firstred {קאָליר: רויט; }
אָדער איר קענען רשימה די סטיילז אויף יחיד שורות פֿאַר קלעריטי:
th,
td,
p.red,
div # firstred
{
קאָליר: רויט;
}
אָדער אופֿן וואָס איר נוצן צו ציילן קייפל CSS סעלעקטאָרס גיכקייַט אַרויף דיין פּלאַץ און מאַכן עס גרינגער צו פירן סטיילז לאַנג טערמין.
אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 5/8/17.