🎉 سال نو، مهارت نو، مشاوره رایگان نقشه راه برنامه نویسی (آفر ویژه ثبت نام قبل از افزایش قیمت 🔥)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ emad ta
فصل css۳ خلاصه مطالب جلسه شانزدهم - combinator و attribute سلکتور‌ها - بخش اول
Forough Gh حل شده توسط Forough Gh

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

 

1- Combinators Selector روش‌های متفاوتی برای انتخاب المان ها  هستند 

2- Atribute Selector انتخاب المان‌ها بر اساس صفت هاشون  

 

انواع Combinators Selector

 

1- ( descendant selector  ( space  


div p a {
}

 

2- child Slecetor  یک موقع هست ما در داخل یک تگ والد مثل همین div میایم و یکسری المان دیگه هم تعریف میکنیم حال میخواهیم از فرزندانش فقط یک سری مثلا تگ‌های p  رو انتخاب کنیم که برای این کار میایم و از این نوع سلکتورا استفاده میکنیم 

div > p {  }

3- ( + ) adjacent sibling selector بلافاصله بعدش انتخاب برادر یا خواهر کناریش مثلا اون تگ div که کلاس d را دارد بلافاصله بعدش تگ p  رو بیا و انتخاب بکنش 

div.d + p { }

4- ( ~ ) general sibling  selector مثل یک بالای بلافاصله نیست میگه هر چقدر خواهر یا برادر داشت من انتخاب میکنم فقط نوع اش رو برای من مشخص بکن 

main.parent  ~ span { } 

 

 

Atribute Selector                                                      -----------------------------------------------------------------

 

براساس ویژگی‌ها میتوانیم بیاییم و انتخاب بکنیم برای مثال امنتخاب بر اساس Atribute صرفا و یا Atribute همراه با مقدار مشخصی که میگرد طبق مثال‌های پایین

.login input[disabled] {    }
and 
.login input[value= " emad" ] {    } 

 

تفاوت child Slecetor و  descendant selector:

در حالت اول ( {}div > p ) تمام تگ‌های <p> که مستقیما داخل <div> هستند، یعنی فرزند بلافصل این تگ هستند، انتخاب می‌شوند.

ولی در حالت دوم ( {} div p) تمام تگ‌های <p> که درون <div> هستند - چه مستقیما درون آن باشند، چه داخل تگ دیگری باشند که والد آنها زیرمجموعه <div> است - انتخاب می‌شوند.

بهترین پاسخ
Forough Gh ۲۶ مرداد ۱۳۹۹، ۱۰:۲۶