انتخاب کنندگان CSS برای مبتدیان – جامعه dev

هنگام یک ظاهر طراحی یک صفحه وب ، باید CSS را بدانید و نحوه استفاده از انتخاب کنندگان مناسب را برای دستیابی به نتیجه مورد نظر خود درک کنید. انتخاب کنندگان به شما کمک می کنند عناصر خاص HTML را هدف قرار دهید تا سبک ها را به طور موثر اعمال کنید.

1. انتخاب جهانی (*)

انتخاب جهانی سبک ها را اعمال می کند همه عناصر در صفحه

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

از آن به طور کم استفاده کنید ، عمدتا برای تنظیم مجدد سبک های پیش فرض.

2. انتخاب عنصر (element)

انتخاب کننده عنصر تمام نمونه های یک برچسب HTML خاص را هدف قرار می دهد.

p {
    color: blue;
    font-size: 16px;
}

شما می توانید از این برای یک ظاهر طراحی عمومی عناصر مشترک استفاده کنید (به عنوان مثال ، bodyبا h1با p).

انتخاب کننده کلاس 3 (.class)

انتخاب کننده کلاس عناصر را با یک کلاس خاص هدف قرار می دهد.

.highlight {
    background-color: yellow;
    font-weight: bold;
}

 class="highlight">This text is highlighted.

بهترین برای سبک های قابل استفاده مجدد در میان چندین عنصر.

4. انتخاب کننده شناسه (#id)

ID انتخاب کننده عنصری را با یک خاص هدف قرار می دهد idبشر

#header {
    background-color: navy;
    color: white;
    padding: 10px;
}

 id="header">Welcome to My Website

فقط برای سبک های “یک طرفه” استفاده کنید.

5. انتخاب کننده گروه بندی (A, B, C)

این اجازه می دهد تا چندین عنصر را به طور همزمان یک ظاهر طراحی کنید.

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: darkslategray;
}

این کمک می کند از سبک های اضافی خودداری کنید و CSS را نگه دارید تمیزبشر

6. انتخاب کننده نوادگان (A B)

عناصر را در داخل یک والدین خاص هدف قرار می دهد.

nav ul {
    list-style-type: none;
    padding: 0;
}

آنها انتخاب کننده ها را نگه می دارند کوتاه و قابل خواندنبشر

7. انتخاب کننده کودک (A > B)

اهداف هدایت کردن فقط کودکان

div > p {
    color: red;
}

    Styled paragraph  
    

        Not affected  
    

از زمان استفاده کنید فقط فرزندان مستقیم به یک ظاهر طراحی شده نیاز دارید.

8. انتخاب کننده خواهر و برادر مجاور (A + B)

یک عنصر را هدف قرار می دهد بلافاصله دیگری.

h1 + p {
    color: green;
}

Heading
This paragraph is green.
This one is not.

برای عناصر یک ظاهر طراحی شده استفاده کنید درست دیگری.

9. انتخاب کننده خواهر و برادر عمومی (A ~ B)

اهداف همه خواهر و برادرهای تطبیق بعد از یک عنصر خاص

h1 ~ p {
    color: orange;
}

Heading
This is orange.
This is also orange.

از چندین عنصر استفاده کنید بعد از یک مورد خاص به یک ظاهر طراحی شده نیاز دارید.

پایان

استاد انتخاب کنندگان یک ظاهر طراحی شده آسان تر و ساختار یافته تر! 🚀
معمولاً هنگام ظاهر طراحی از چه چیزی استفاده می کنید؟

من یک توسعه دهنده کامل پشته JS/TS هستم که برای همکاری و پیشنهادات شغلی باز است. احساس راحتی کنید که به من دسترسی پیدا کنید