سلکتور های css بخش دوم

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

سلکتور های css بخش دوم را برای شما کاربران گرامی سایت آموزی تدارک دیده ایم.

در این بخش نیز در مورد سه سلکتور مهم دیگر css توضیحاتی را ارائه می کنم.

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

انتخابگر ( Selector * ) یا سلکتور ستاره ( Universal Selector )

این سلکتور قابلیت انتخاب کلیه المنت های سند css را دارد.

و کدی که داخل آکولاد باز و بسته قرار می گیرد، تغییرات را برای همه المنت های سند اعمال می کند.

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

* {margin: 0; padding: 0;}

انتخابگر ( X Selector#  ) یا سلکتور Id :

سلکتور Id قابلیت انتخاب یک تگ مخصوص و یا یک گروه تگ مخصوص را در سند دارد.

Id (شناسه) فقط یکبار در سند می تواند تعریف شود. و برخلاف خصیصه کلاس قابلیت اختصاص به چندین گروه تگ را ندارد.

سلکتور Id با یک علامت # (شارپ) شروع شده و پس از آن اسم Id می آید.

و کدی که داخل آکولاد باز و بسته قرار می گیرد، تغییرات را برای همان شناسه مخصوص اعمال می کند.

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

#column1 {font-size: 20px;}

انتخابگر ( X Y  Selector ) یا سلکتور تگ های سلسله مراتبی :

گاهی قصد داریم المنت (تگ) فرزند را داخل المنت (تگ) پدر با روابط والد و فرزندی انتخاب کنیم.

مثلا ممکن است در سند ما تگ های a زیادی وجود داشته اما منظور ما تغییر در آن تگ های a می باشد که درون تگ پدر li قرار دارند.

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector

به مثال زیر توجه کنید که تغییرات برای تگ های a درون تگ li لحاظ می شود :

li > a {text-decoration: none;}

در مثال بالا تنها گروه تگ هایی که در سند html مورد نظر داخل تگ پدر li (لیست نامرتب) هستند، آندرلاین پیش فرض خود را از دست می دهند. و سایر تگ های a در سند شامل این تغییر نمی شوند.

سلکتور های css بخش دوم | انتخابگر XSelector# | انتخابگر XYSelector – اختصاصی سایت آموزی

توسط | ۱۳۹۷/۴/۲۲ ،۱۲:۴۵:۴۶ +۰۰:۰۰ تیر ۲۲ام, ۱۳۹۷|css دسته بندی ها|برچسب ها: , , , , |بدون دیدگاه

در باره نویسنده :

ثبت ديدگاه

13 − 12 =