BASIC CSS SELECTORS – DEV Community

Summarize this content to 400 words in Persian Lang
انتخابگرهای CSS برای هدف قرار دادن عناصر خاص HTML و اعمال سبک ها به آنها استفاده می شود. چند راه وجود دارد که می‌توانیم در مورد عنصری که قصد انتخاب آن را داریم دقیق باشیم. در این فصل، ما بر روی چهار روش اصلی انتخاب تمرکز می کنیم.

1. انتخابگر جهانی

انتخابگر جهانی برای هدف قرار دادن همه عناصر در یک صفحه استفاده می شود. این انتخابگر معمولاً در مواردی از قالب بندی اولیه مفید است. رایج‌ترین استفاده از انتخابگر جهانی حذف حاشیه‌ها و لایه‌های پیش‌فرض است.

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

مثال

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. انتخاب بر اساس نام عنصربا این رویکرد، تمام عناصر نامگذاری شده توسط انتخابگر بر اساس آن استایل بندی می شوند. این فقط آنهایی را که به طور متفاوت انتخاب شده اند حذف می کند، همانطور که در نمونه های آینده خواهیم دید.نمونه کد:

this is heading 1
this is paragraph 1
this is paragraph 2
this is paragraph 3
this is heading 2
this is paragraph 4
this is paragraph 5

HTML

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

body{
background: lightgray;
}
h3{
color: blue;
}
p{
color: red;

}

CSS

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیحات تصویر

3. انتخاب با شناسه

شناسه یک شناسه منحصر به فرد است که یک عنصر را از سایر عناصر متمایز می کند. در حالت ایده آل، باید تنها یک عنصر با همان شناسه در یک صفحه وجود داشته باشد. ممکن است عناصر زیادی با ویژگی id وجود داشته باشد، اما بیش از یکی نباید نام یکسان داشته باشد. در غیر این صورت هیچ چیز منحصر به فردی در مورد شناسه وجود نخواهد داشت. بنابراین برای استایل دادن به یک عنصر با id، از ویژگی id برای دادن نام در HTML استفاده کنید، سپس هنگام انتخاب در CSS از نماد # قبل از آن نام استفاده کنید.

this is heading 1
this is paragraph 1
this is paragraph 2
this is paragraph 3
this is heading 2
this is paragraph 4
this is paragraph 5

HTML

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

#unique{
color: green;
}
body{
background: lightgray;
}
h3{
color: blue;
}
p{
color: red;

}

CSS

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیحات تصویر

4. انتخاب بر اساس کلاس

کلاس به نوعی شبیه id است، اما در مورد کلاس، ممکن است بیش از یک عنصر با نام کلاس مشابه وجود داشته باشد. برای استایل دادن به یک عنصر با نام کلاس، از ویژگی class برای دادن نام به آن در HTML استفاده کنید، سپس از . نماد قبل از آن نام، هنگام انتخاب در CSS.نمونه کد

this is heading 1
this is paragraph 1
this is paragraph 2
this is paragraph 3
this is heading 2
this is paragraph 4
this is paragraph 5

HTML

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.pink{
background: pink;
}
body{
background: lightgray;
}
h3{
color: blue;
}
p{
color: red;

}

CSS

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیحات تصویر

نتیجه

هر نوع انتخابگر هدف و کاربرد خاص خود را دارد. درک نحوه استفاده از هر انتخابگر برای کنترل سبک HTML و چیدمان موثر بسیار مهم است. استفاده صحیح از انتخابگرها می تواند به ایجاد صفحات وب از نظر بصری جذاب و ساختار یافته کمک کند و تعامل و درک محتوای ارائه شده را برای کاربران آسان تر کند.

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

this is heading 1
    
this is paragraph 1
    
this is paragraph 2
    
this is paragraph 3
    
this is heading 2
    
this is paragraph 4
    
this is paragraph 5

body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

   
this is heading 1
    
this is paragraph 1
    
this is paragraph 2
    
this is paragraph 3
    
this is heading 2
    
this is paragraph 4
    
this is paragraph 5

#unique{
    color: green;
}
body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

    
this is heading 1
    
this is paragraph 1
    
this is paragraph 2
    
this is paragraph 3
    
this is heading 2
    
this is paragraph 4
    
this is paragraph 5

.pink{
    background: pink;
}
body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

هر نوع انتخابگر هدف و کاربرد خاص خود را دارد. درک نحوه استفاده از هر انتخابگر برای کنترل سبک HTML و چیدمان موثر بسیار مهم است. استفاده صحیح از انتخابگرها می تواند به ایجاد صفحات وب از نظر بصری جذاب و ساختار یافته کمک کند و تعامل و درک محتوای ارائه شده را برای کاربران آسان تر کند.