CSS ընտրիչի specificity-ի հաշվարկման ուղեցույց

Ինչ է հաշվարկում գործիքը

CSS ընտրիչի specificity-ը օգնում է հասկանալ, թե ընտրիչի կառուցվածքն ինչպես է արտացոլվում դրա հաշվարկային կշռում։ Այս գործիքը մուտքագրված ընտրիչի համար ցույց է տալիս չորս բաղադրիչ և դրանցից ստացված թվային միավոր։ Այն կարող եք օգտագործել, երբ համեմատում եք մի քանի ընտրիչների հաշվարկային արժեքները, ուսումնասիրում եք ոճավորման կանոնների կառուցվածքը կամ փորձում եք պարզել, թե ընտրիչի որ հատվածներն են ավելացնում արդյունքի կշիռը։

Մուտքագրումը ընտրիչի տեքստն է։ Այն կարող է լինել նույնացուցիչով, դասային նշումով, ատրիբուտային պայմանով, pseudo-class-ով, pseudo-element-ով կամ տարրի անվանումով ընտրիչ։ Գործիքը պահպանում է ոչ դատարկ մուտքագրված տեքստի ներկայացումը արդյունքի մեջ, ուստի կարող եք համադրել արդյունքը ձեր ուղարկած ընտրիչի հետ։ Դատարկ դաշտը նույնպես ընդունելի մուտք է, սակայն այդ դեպքում ստանում եք զրոյական հաշվարկ։

Արդյունքը բաղկացած է չորս բաղադրիչից։ Առաջինը վերաբերում է հայտնաբերված նույնացուցիչներին, երկրորդը՝ դասային ընտրիչներին, ատրիբուտային ընտրիչներին և pseudo-class-երին, իսկ երրորդը՝ pseudo-element-երին ու հայտնաբերված տարրի կամ տիպի ընտրիչներին։ Չորրորդ բաղադրիչը նույնպես ցուցադրվում է, որպեսզի արդյունքի կառուցվածքը ներկայացվի ամբողջ ձևաչափով։ Համընդհանուր ընտրիչը հաշվարկում չի ավելացնում միավոր։

Ինչպես կատարել հաշվարկը

1. Բացեք CSS ընտրիչի specificity-ի հաշվարկման գործիքը և գտեք մուտքագրման դաշտը։ Դաշտը նախատեսված է ընտրիչի տեքստի համար։ Նախապես պատրաստեք այն ընտրիչը, որի կառուցվածքն ուզում եք ուսումնասիրել, որպեսզի արդյունքը կապեք ձեր CSS կանոնի հետ։

2. Մուտքագրեք ընտրիչը դաշտում։ Կարող եք սկսել պարզ տարբերակից, օրինակ՝ #menu կամ .card, և հետո փորձել ավելի բարդ համադրություն։ Ոչ դատարկ մուտքի դեպքում ուշադրություն դարձրեք, որ արդյունքի ընտրիչի ներկայացումը համապատասխանում է ուղարկված տեքստին։ Այդ հատկությունը հարմար է մուտքագրական սխալը տեսնելու և արդյունքը սկզբնական ընտրիչի հետ ստուգելու համար։

3. Գործարկեք հաշվարկը և նայեք չորս բաղադրիչներին ու թվային միավորին։ Եթե դաշտում միայն բացատներ են, դրանք չեն հանգեցնում իմաստավոր ընտրիչի հաշվարկի. այդպիսի մուտքը դիտարկվում է որպես դատարկ, և արդյունքը կազմված է չորս զրոյից, զրոյական միավորից ու դատարկ ընտրիչի ներկայացումից։

4. Բաղադրիչները կարդացեք հերթականությամբ։ Առաջին դիրքը ցույց է տալիս նույնացուցիչների ներդրումը։ Երկրորդ դիրքում դիտարկվում են դասային ընտրիչները, ատրիբուտային ընտրիչները և pseudo-class-երը։ Երրորդում հաշվի են առնվում pseudo-element-երը և հայտնաբերված տարրի կամ տիպի ընտրիչները։ Համընդհանուր ընտրիչի առկայությունը ինքնուրույն միավոր չի ավելացնում։

5. Թվային միավորը ստուգելու համար կիրառեք կշիռները՝ առաջին բաղադրիչը բազմապատկելով 1000-ով, երկրորդը՝ 100-ով, երրորդը՝ 10-ով, իսկ չորրորդը՝ 1-ով, ապա գումարելով ստացված արժեքները։ Օրինակ՝ առաջին բաղադրիչի մեկ միավորը թվային արդյունքի վրա ավելի մեծ ազդեցություն ունի, քան երկրորդ բաղադրիչի մեկ միավորը։

6. Եթե ուսումնասիրում եք մի քանի ընտրիչ, կատարեք հաշվարկները նույն եղանակով և համեմատեք նախ չորս բաղադրիչների դիրքերը, ապա դրանցից ստացված թվային միավորները։ Արդյունքը գրանցելիս պահեք նաև ընտրիչի ներկայացումը, որպեսզի հետագայում չշփոթեք նմանատիպ մուտքերը։

Ինչպես կարդալ արդյունքը

Արդյունքի չորս բաղադրիչները պետք է կարդալ ոչ թե որպես սովորական ընդհանուր քանակ, այլ որպես տարբեր դիրքեր ունեցող ներդրումներ։ Առաջին դիրքն ունի 1000 կշիռ, երկրորդը՝ 100, երրորդը՝ 10, իսկ չորրորդը՝ 1։ Այդ պատճառով մեկ դիրքի փոփոխությունը կարող է թվային միավորի վրա ավելի մեծ ազդեցություն ունենալ, քան մեկ այլ դիրքի նույն չափի փոփոխությունը։ Թվային արժեքը ստացվում է հենց այս չորս կշիռների համադրությունից։

Օրինակ, նույնացուցիչ պարունակող ընտրիչի առաջին բաղադրիչը կարող է մեծացնել արդյունքը 1000 կշռով։ Դասային ընտրիչը նպաստում է երկրորդ բաղադրիչին, իսկ pseudo-element-ը՝ երրորդին։ Ատրիբուտային ընտրիչներն ու pseudo-class-երը նույնպես մտնում են երկրորդ բաղադրիչի մեջ, մինչդեռ տարրի կամ տիպի հայտնաբերված ընտրիչները մտնում են երրորդի մեջ։ Համընդհանուր ընտրիչը կշռված արդյունքին ներդրում չի տալիս։

Համեմատելիս մի սահմանափակվեք միայն թվային միավորով։ Նախ ստուգեք, թե որ բաղադրիչներն են ցուցադրված, ապա դիտեք ընտրիչի ներկայացումը և համոզվեք, որ այն համապատասխանում է ձեր մուտքին։ Եթե մուտքը ոչ դատարկ է, այդ ներկայացումը պահպանում է ուղարկված ընտրիչի տեքստը։ Եթե դաշտը դատարկ է կամ բաղկացած է միայն բացատներից, զրոյական արդյունքը սպասելի է և չի նշանակում, որ ընտրված ընտրիչը ստացել է փոքր կշիռ։

Այս հաշվարկը պետք է մեկնաբանել որպես տվյալ գործիքի կողմից ճանաչված ձևերի վրա հիմնված արդյունք։ Այն օգտակար է կառուցվածքային համեմատության համար, սակայն ավելի բարդ կամ գործիքի ճանաչման ձևերին չհամապատասխանող ընտրիչների դեպքում ցուցադրված արժեքը մի դիտարկեք որպես CSS ընտրիչների հնարավոր ձևերի ամբողջական վերլուծություն։ Այդպիսի դեպքերում արդյունքը համադրեք ձեր ընտրիչի իրական կառուցվածքի և օգտագործման նպատակի հետ։

Գործնական օրինակ

Կայքի գլխավոր նավիգացիայի նույնացուցիչի հաշվարկը ստուգելու համար մուտքագրում եք #menu և համադրում ստացված բաղադրիչը, թվային միավորը ու ընտրիչի ներկայացումը։

Մուտքագրեք #menu և գործարկեք հաշվարկը։

Արդյունքում երևում են չորս բաղադրիչ՝ [1, 0, 0, 0], թվային միավոր՝ 1000, և ընտրիչի ներկայացում՝ #menu։

Սահմանափակումներ

• Արդյունքը հիմնված է գործիքի կողմից ճանաչվող ընտրիչային ձևերի վրա, ուստի ավելի բարդ կամ չճանաչված ձևերի համար այն չի ներկայացնում CSS ընտրիչների հնարավոր ձևերի ամբողջական վերլուծություն։

Հաճախակի սխալներ

• Եթե ստանում եք չորս զրո և զրոյական միավոր, պատճառը կարող է լինել դատարկ կամ միայն բացատներից կազմված դաշտը։ Մուտքագրեք ընտրիչի ամբողջ տեքստը, ստուգեք դրա ներկայացումը և կրկին գործարկեք հաշվարկը։

Հաճախ տրվող հարցեր

Պարտադի՞ր է CSS ընտրիչ մուտքագրել։

Մուտք չլինելը թույլատրելի է, սակայն դատարկ կամ միայն բացատներից կազմված մուտքի դեպքում գործիքը վերադարձնում է չորս զրոյական բաղադրիչ, զրո թվային միավոր և դատարկ ընտրիչի ներկայացում։

Ինչպե՞ս են նույնացուցիչն ու դասային ընտրիչը ազդում specificity-ի վրա։

Նույնացուցիչը նպաստում է առաջին բաղադրիչին, իսկ դասային ընտրիչը՝ երկրորդին։ Թվային միավորը այդ դիրքերը կշռում է համապատասխանաբար 1000 և 100 արժեքով, այնպես որ դրանց ազդեցությունը նույնը չէ։

Հաշվարկվո՞ւմ են համընդհանուր, ատրիբուտային և pseudo ընտրիչները։

Համընդհանուր ընտրիչը հաշվարկում միավոր չի ավելացնում։ Ատրիբուտային ընտրիչներն ու pseudo-class-երը մտնում են երկրորդ բաղադրիչի մեջ, իսկ pseudo-element-երը և հայտնաբերված տարրի կամ տիպի ընտրիչները՝ երրորդի։