tamafi6
پنج شنبه 08 بهمن 1394, 00:17 صبح
گزینشگرها به عنوان قلب CSS به حساب می آیند.بدون استفاده ازگزینشگرهابرای انتخاب عناصرصفحه تنهایک راه باقی میماندوآن هم استفاده ازخصیصه style ونوشتن سبک هابه شکل درون خطی ودرداخل خودبرچسب است .قطعااستفاده از خصیصه style برای سبک دهی کاری ناپسندونامناسب است وسهولت نگهداری ازکدتان را ازبین میبرد.به طورکلی CSS به مااجازه می دهدکه عناصررابراساس نوع کلاس وشناسه انتخاب کنیم .برای اینکارباید ازخصیصه های class وidدرکد HTML مان استفاده کنیم تابتوانیم بااستفاده ازاین کلاس وشناسه هابین عناصرداخل صفحه تمایزایجادکنیم درادامه گزینشگرهای CSS را معرفی میکنیم
گزینشگرخویشاوندی
گزینشگرهای خویشاوندی عناصررابراساس رابطه شان بادیگرعناصرداخل کد انتخاب میکنند.تمامی این گزینشگرها دراینترنت اکسپلورر نسخه 7 به بعد, فایرفاکس , اپراومرورگرهای برپایه Webkit به درستی کارمیکنند:
گزینشگرفرزند (E F)
این گزینشگر تمامی عناصر F که دارای فرزند وزاده فرزند .نوه ونتیجه عنصر E هستند راانتخاب میکند برای مثال دستور ol liتمامی li هایی که داخل لیست قرارداشته باشندراانتخاب میکندواگردرون این مقداریک ul دیگرباشد li همهliهای داخل آن برچسب هم انتخاب میشود.
گزینشگرفرزندمستقیم (E > F)
این گزینشگرتمامی عناصر F راکه به طورمستقیم فرزند عنصر E حساب میشوند راانتخاب میکندوعناصردیگری که درداخل برچسب های F قرارگرفته اندرانادیده میگیرددرمثال اگرماازدستور ol>li استفاده کنیم تنها li هایی که به طورمستقیم درداخل برچسب ol قرارگرفته اندانتخاب میشودواگرداخل یکی از li هایک ul باشدودرون آن ul چندین li دیگرباشد دیگراین li هاانتخاب نخواهندشد.
گزینشگرهمزادمجاور (E + F)
این گزینشگر تمامی عناصر F ای راکه دارای والدیکسانی باعنصر E هستند راانتخاب میکندبه شرطی که تمامی این عناصر F بعدازعنصر E درکدآمده باشد .برای مثال li+li تمامی li هاراانتخاب میکندبه جزاولین li .
گزینشگرهمزاد (E ~ F)
این گزینشگرتمامی عناصر F ای راکه والدشان باوالد E یکسان است راانتخاب میکندبه شرطی که این گزینشگرهابعدازعنصر E درکدآمده باشد.ازاین رو h1~h2تمامی برچسب های h2 ای راکه بعداز h1 آمده باشد راانتخاب میکند.به شرطی که والدمستقیم هردوی این عناصریکسان باشد.به همین خاطراگر h2 بعداز h1 آمده باشدولی درداخل یک برچسب دیگرقرارگرفته باشدتوسط این گزینشگرانتخاب نخواهدشد.
گزینشگر h1~h2 اولین h2 دراین کدراانتخاب میکندزیراهردوی h1 و h2 دراینجادارای والدمستقیم یکسانی (header) هستند.دومین h2 انتخاب نمیشود زیراوالدآن برچسب article است نه header .البته بادستور header~h2 میتوان این برچسب رانیزانتخاب کرد .مشابه همین وضعیت اگر ازدستور h2~p استفاده کنیم تنها آخرین پاراگراف انتخاب میشودوازآنجایی که اولین پاراگراف قبل ازبرچسب h2 قرارگرفته. بااین والدهردوی این برچسب ها یکسان است ولی این پاراگراف انتخاب نمیشود.
گزینشگرهای خصیصه
CSS2 چندین گزینشگر خصیصه رامعرفی کرد.این گزینشگرهابه شمااجازه میدادندکه عناصررابراساس خصیصه شان انتخاب کنید.CSS3 این گزینشگرهاراتوسعه داده است وحتی میتوان براساس یک الگویک خصیصه راانتخاب کرد.
E [attr]
این گزینشگرتمامی عناصر E که دارای خصیصه ی attr باشدراانتخاب میکنددراینجااصلا مهم نیست که مقدارمربوط به خصیصه چیست .درکدنویسی اگردستوررابه شکل input:required بنویسیم درتمامی مرورگرهای جدیدکارخواهدکردولی برای اینکه دستورمان درمرورگرهایی که کمی قدیمی ترهستندکارکندازدستور input:[required] استفاده میکنیم.
ادامه مطلب:
گزینشگرهای CSS3 ومعرفی چندکلاس جدید (http://pacifist.xzn.ir/home/css3-selectors/)
گزینشگرخویشاوندی
گزینشگرهای خویشاوندی عناصررابراساس رابطه شان بادیگرعناصرداخل کد انتخاب میکنند.تمامی این گزینشگرها دراینترنت اکسپلورر نسخه 7 به بعد, فایرفاکس , اپراومرورگرهای برپایه Webkit به درستی کارمیکنند:
گزینشگرفرزند (E F)
این گزینشگر تمامی عناصر F که دارای فرزند وزاده فرزند .نوه ونتیجه عنصر E هستند راانتخاب میکند برای مثال دستور ol liتمامی li هایی که داخل لیست قرارداشته باشندراانتخاب میکندواگردرون این مقداریک ul دیگرباشد li همهliهای داخل آن برچسب هم انتخاب میشود.
گزینشگرفرزندمستقیم (E > F)
این گزینشگرتمامی عناصر F راکه به طورمستقیم فرزند عنصر E حساب میشوند راانتخاب میکندوعناصردیگری که درداخل برچسب های F قرارگرفته اندرانادیده میگیرددرمثال اگرماازدستور ol>li استفاده کنیم تنها li هایی که به طورمستقیم درداخل برچسب ol قرارگرفته اندانتخاب میشودواگرداخل یکی از li هایک ul باشدودرون آن ul چندین li دیگرباشد دیگراین li هاانتخاب نخواهندشد.
گزینشگرهمزادمجاور (E + F)
این گزینشگر تمامی عناصر F ای راکه دارای والدیکسانی باعنصر E هستند راانتخاب میکندبه شرطی که تمامی این عناصر F بعدازعنصر E درکدآمده باشد .برای مثال li+li تمامی li هاراانتخاب میکندبه جزاولین li .
گزینشگرهمزاد (E ~ F)
این گزینشگرتمامی عناصر F ای راکه والدشان باوالد E یکسان است راانتخاب میکندبه شرطی که این گزینشگرهابعدازعنصر E درکدآمده باشد.ازاین رو h1~h2تمامی برچسب های h2 ای راکه بعداز h1 آمده باشد راانتخاب میکند.به شرطی که والدمستقیم هردوی این عناصریکسان باشد.به همین خاطراگر h2 بعداز h1 آمده باشدولی درداخل یک برچسب دیگرقرارگرفته باشدتوسط این گزینشگرانتخاب نخواهدشد.
گزینشگر h1~h2 اولین h2 دراین کدراانتخاب میکندزیراهردوی h1 و h2 دراینجادارای والدمستقیم یکسانی (header) هستند.دومین h2 انتخاب نمیشود زیراوالدآن برچسب article است نه header .البته بادستور header~h2 میتوان این برچسب رانیزانتخاب کرد .مشابه همین وضعیت اگر ازدستور h2~p استفاده کنیم تنها آخرین پاراگراف انتخاب میشودوازآنجایی که اولین پاراگراف قبل ازبرچسب h2 قرارگرفته. بااین والدهردوی این برچسب ها یکسان است ولی این پاراگراف انتخاب نمیشود.
گزینشگرهای خصیصه
CSS2 چندین گزینشگر خصیصه رامعرفی کرد.این گزینشگرهابه شمااجازه میدادندکه عناصررابراساس خصیصه شان انتخاب کنید.CSS3 این گزینشگرهاراتوسعه داده است وحتی میتوان براساس یک الگویک خصیصه راانتخاب کرد.
E [attr]
این گزینشگرتمامی عناصر E که دارای خصیصه ی attr باشدراانتخاب میکنددراینجااصلا مهم نیست که مقدارمربوط به خصیصه چیست .درکدنویسی اگردستوررابه شکل input:required بنویسیم درتمامی مرورگرهای جدیدکارخواهدکردولی برای اینکه دستورمان درمرورگرهایی که کمی قدیمی ترهستندکارکندازدستور input:[required] استفاده میکنیم.
ادامه مطلب:
گزینشگرهای CSS3 ومعرفی چندکلاس جدید (http://pacifist.xzn.ir/home/css3-selectors/)