וואָס איז דער קאָממאַ פֿאַר CSS סעלעקטאָרס?

פארוואס אַ פּשוט קאָממאַ סימפּלאַפייז קאָדירונג

CSS, אָדער קאַסקאַדינג סטייל שיץ, זענען די וועב פּלאַן אינדוסטריע ס אנגענומען וועג צו לייגן וויזשאַוואַל סטיילז צו אַ פּלאַץ. מיט קסס, איר קענען קאָנטראָלירן בלאַט אויסלייג, פארבן, טיפּאָגראַפי , הינטערגרונט בילד, און פיל מער. בייסיקלי, אויב עס איז אַ וויזשאַוואַל סטיל, דעמאָלט CSS איז די וועג צו ברענגען די סטיילז צו דיין וועבזייַטל.

ווי איר לייגט CSS סטיילז צו אַ דאָקומענט, איר קען באַמערקן אַז די דאָקומענט הייבט צו באַקומען מער און מער. אפילו אַ קליין פּלאַץ מיט בלויז אַ האַנדפול פון בלעטער קענען סוף אַרויף מיט אַ סיזאַבאַל קסס טעקע - און אַ זייער גרויס פּלאַץ מיט גורל און גורל פון בלעטער פון יינציק צופרידן קענען האָבן זייער גרויס CSS טעקעס. דעם איז קאַמפּאַונדיד דורך אָפּרופיק זייטלעך וואָס האָבן גורל פון מידיאַ קוויריז אַרייַנגערעכנט אין די נוסח שיץ צו טוישן ווי די וויסואַלז קוק און די בלאַט לייז אויס פֿאַר פאַרשידענע סקרינז.

יאָ, CSS טעקעס קענען באַקומען לאַנג. דעם איז ניט אַ הויפּט פּראָבלעם ווען עס קומט צו פּלאַץ פאָרשטעלונג און אָפּלאָדירן גיכקייַט, ווייַל אפילו אַ לאַנג CSS טעקע איז מסתּמא צו זיין שיין קליין (זינט עס איז טאַקע נאָר אַ טעקסט דאָקומענט). נאָך, יעדער ביסל ביסל קייט ווען עס קומט צו די גיכקייַט, אַזוי אויב איר קענען מאַכן דיין נוסח בלאַט ווייניקער, עס איז אַ גוטע געדאַנק. דעם איז ווו די "קאָמע" קענען קומען אין זייער האַנטיק אין דיין נוסח בלאַט!

קאָממאַס און קסס

איר קען האָבן געחידושט וואָס ראָלע די קאָמע פיעסעס אין קסס סעלעקטאָר סינטאַקס. ווי אין זאצן, די קאָמע ברענגט קלעריטי-ניט קאָד-צו די סעפּאַראַטאָרס. די קאָמע אין אַ קסס סעלעקטאָר סעפּערייץ קייפל סעלעקטאָרס ין דער זעלביקער סטיילז.

פֿאַר בייַשפּיל, לאָמיר קוק בייַ עטלעכע קסס ונטער.

טה {קאָליר: רויט; }
טד {קאָלירן: רויט; }
p.red {קאָליר: רויט; }
div # firstred {קאָליר: רויט; }

מיט דעם סינטאַקס, איר זייַנען גערעדט אַז איר ווילט טה טאַגס, טד טאַגס, פּאַראַגראַפס מיט די סאָרט רויט, און די דיוו טאַג מיט די שייַן שטריך אַלע צו האָבן די נוסח קאָליר רויט.

דעם איז בישליימעס פּאַסיק CSS, אָבער עס זענען צוויי באַטייַטיק דיסאַדוואַנטידזשיז צו שרייבן עס דעם וועג:

• אין דער צוקונפֿט, אויב איר באַשליסן צו טוישן די שריפֿט קאָליר פון די פּראָפּערטיעס צו בלוי, איר האָבן צו מאַכן אַז טוישן פיר מאל אין דיין נוסח בלאַט.
• עס מוסיף אַ פּלאַץ פון עקסטרע אותיות צו דיין נוסח בויגן אַז איר טאָן ניט דאַרפֿן. די 4 סטיילז קען נישט ויסקומען ווי אָוווערקיל, אָבער אויב איר פאָרזעצן טאָן דאָס איבער דיין גאנצע נוסח בויגן, די שורות וועט לייגן אַרויף און אַז בלאַט וועט זיין פיל, פיל ביגער ווי עס דארף צו זיין.

צו ויסמייַדן די דיסאַדוואַנטידזשיז, און צו באַשיצן אייער קסס טעקע, מיר וועלן פּרובירן ניצן קאָמבאַס.

ניצן קאָממאַס צו סעפּאַראַטע סעלעקטאָרס

אַנשטאָט שרייַבן 4 באַזונדער CSS סעלעקטאָרס און 4 כּללים, איר קענען קאַמביין אַלע די סטיילז אין איין הערשן פאַרמאָג דורך סעפּערייטינג די יחיד סעלעקטאָרס מיט אַ קאָמע. דאָ איז ווי דאָס וואָלט געטאן:

th, td, p.red, div # firstred {קאָליר: רויט; }

דער קאָמע כאַראַקטער בייסיקלי אקטן ווי די וואָרט "און" ין דער סעלעקטאָר. אזוי דאָס אַפּלייז צו ה טאַגס און טד טאַגס און פּאַראַגראַפס מיט די סאָרט רויט און די דיוו טאַג מיט די שייַן יד שטרענג. אַז איז פּונקט וואָס מיר האבן פריער, אָבער אַנשטאָט פון נידינג 4 קסס כּללים, מיר האָבן אַ איין הערשן מיט קייפל סעלעקטערז. דעם איז וואָס די קאָמע טוט אין די סעלעקטאָר, עס אַלאַוז אונדז צו האָבן קייפל סעלערז אין איין הערשן.

ניט בלויז טוט דעם צוגאַנג מאַכן פֿאַר ליסער, רייניקונג קסס טעקעס, עס אויך מאכט צוקונפֿט דערהייַנטיקונגען אַזוי פיל גרינגער. איצט אויב איר געוואלט צו טוישן די קאָליר פון רויט צו בלוי, איר נאָר האָבן צו מאַכן די ענדערונג אין איין אָרט אַנשטאָט פון די אָריגינעל 4 נוסח כּללים מיר! טראַכטן וועגן די צייַט סייווינגז אַריבער אַ גאַנץ קסס טעקע און איר קענען זען ווי דאָס וועט ראַטעווען איר ביידע מאָל און פּלאַץ אין די לאַנג ריי!

Syntax Variation

עטלעכע מענטשן קלייַבן צו מאַכן די קסס מער לעדזשאַבאַל דורך סעפּערייטינג יעדער סעלעקטאָר אויף זייַן אייגן שורה, אַנשטאָט פון שרייבן עס אַלע אויף איין שורה ווי אויבן. דאָס איז ווי דאָס וואָלט געטאן:

th,
td,
p.red,
div # firstred
{
קאָליר: רויט;
}

באמערקט אַז איר שטעלן אַ קאָמע נאָך יעדער סעלעקטאָר און דעמאָלט נוצן "אַרייַן" צו ברעכן די ווייַטער סעלעקטאָר אַנטו זייַן אייגן שורה. דו זאלסט נישט לייגן אַ קאָמע נאָך די לעצט סעלעקטאָר.

ניצן קאָמבאַס צווישן דיין סעלעקטערז, איר שאַפֿן אַ מער קאָמפּאַקט נוסח בויגן וואָס איז גרינגער צו דערהייַנטיקן אין דער צוקונפֿט און דאָס איז גרינגער צו לייענען הייַנט!

אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 5/8/17