سلام، خوانندگان عزیز! همچنان انتخاب کننده های CSS موضوع من می خواهم به شما ارائه دهم شرح شرکت های فرعی و انتخابات متنی، و همچنین تجزیه و تحلیل تطبیقی \u200b\u200bآنها، به دلیل منطق برنامه، آنها بسیار مشابه هستند، هرچند آنها تفاوت دارند.

در نشریات من، من به طور کامل در انواع مختلف انتخاب کننده های CSS باقی مانده ام:؛ همچنین . به هر حال، در آخرین مقاله، جایی که انواع مختلفی از انتخابگر مشخصه جدا شده بود، به طور دقیق توضیح دادم که چگونه محاسبات نظری من را می توان بلافاصله با ایجاد تغییرات در کد HTML و CSS آنلاین با استفاده از Google Chrome ساخته شده () ابزار چنین ابزارهای ویرایش آخرین تغییرات تمام مرورگرهای محبوب، از جمله پلاگین Firebug برای فایرفاکس () را دارند.

مواد نظری این پست همچنین می تواند با ویرایش هر صفحه هر سایت مورد مطالعه قرار گیرد! برای انجام این کار، به سادگی F12 را فشار دهید اگر از Google Chrome یا Mozilla Firefox () استفاده کنید. و در حال حاضر من محتوای تگ P را در نمونه ای که ما مطالعه خواهیم کرد ارائه می دهم subity و CSS متنی CSS:

این پاراگراف شامل برچسب های قالب بندی قوی و قویاین متن را تخصیص می دهد چربی و ایتالیا.

با استفاده از ابزار ویرایش فوق، من این پاراگراف را به طور مستقیم به این مقاله وارد کردم، متن مربوطه را در سمت چپ پنجره به دست آوریم تا ویرایش شود، به عنوان یک نتیجه از آن متن این پاراگراف در بالای صفحه ظاهر شد:

این طراحی HTML ،. این پاراگراف در نشریه امروز تجربی خواهد بود، در مثال او نشان می دهد که چگونه طراحی متن خود را تغییر می دهد، بسته به کدام انتخابگرها - کودک یا متنی - در قانون CSS استفاده می شود.

دختر یک عنصر نامیده می شود که به طور مستقیم در داخل والدین قرار دارد. قبل از ادامه به طور مستقیم به موضوع، من یک عکس را ارائه می دهم که سلسله مراتب تگ را در سند HTML در مثال پاراگراف که متن آن داده شده است، نشان می دهد و امروز ما را از هم جدا می کنیم:

این طراحی همچنین درخت عناصر نامیده می شود. در این رقم، ظروف لانه سازی به وضوح نشان داده شده است، که نشان می دهد روابط سلسله مراتبی بین برچسب ها. پاراگراف P برچسب یک عنصر جانبی در رابطه است. در عین حال، تگ قوی یک شرکت تابعه برای DIV نیست، زیرا آن را در ظرف P اجرا می شود.

SELECTOR CSS فرعی

انتخاب کودک در درخت عناصر همیشه به طور مستقیم در داخل عنصر پدر و مادر است، در این مورد نحو نوشتن CSS انتخاب خواهد شد به شرح زیر است:

این سبک به انتخاب 2 اعمال می شود، اما تنها در صورتی که کودک برای انتخاب کننده باشد 1. ما با استفاده از تصویر فوق با درخت عناصر، جزئیات بیشتری را تجزیه و تحلیل خواهیم کرد. به عنوان مثال، پس از نحو، شما می توانید این قانون را تنظیم کنید:

p\u003e em (رنگ: سبز؛)

این قانون بر آخرین کلمه پاراگراف "Italics" تاثیر می گذارد، زیرا بین تگ های باز و بسته بندی EM به پایان می رسد. برچسب EM یک شرکت تابعه برای P است، زیرا به طور مستقیم در داخل آن قرار می گیرد، بنابراین متن محتوا، یعنی کلمه "Italic" در سبز رنگ شده است.

با این حال، تگ دیگر دیگر به عنوان یک نسل مستقیم از برچسب P خدمت نمی کند، زیرا بخشی از تگ قوی است، زیرا بخشی از آن بخشی از پاراگراف "برچسب های قالب بندی EM و قوی" نقاشی نخواهد شد.

انتخاب CSS متنی

این یک صف برای کشف کردن است انتخاب CSS متنی چیست؟. هنگام قرار دادن یک یا چند صفحه سایت سایت اغلب، برچسب ها در یک به یک دیگر سرمایه گذاری می شوند. به منظور سبک های چنین عناصر به درستی کار می کنند، انتخاب کننده ها استفاده می شوند، که در برخی زمینه ها عمل می کنند، از این رو نام.

اگر به منظور اجرای قانون CSS، انتخاب کودک باید به طور مستقیم در داخل عنصر پدر و مادر (سطح اول لانه سازی) قرار گیرد، سپس برای انتخاب متن کاملا غیر مهم است و هر سطح از لانه سازی می تواند اعمال شود، همه خواص برابر عنصر از والدین منتقل می شود. در همان زمان، نحو این است:

همانطور که می بینید، انتخاب متنی شامل انتخاب کننده های ساده جدا شده توسط یک فضای است. برای انتخابگر متنی، مجاز به استفاده از دو و چند تگ در هر یک از دیگر استفاده می شود. ما اکنون یک قاعده CSS را برای پاراگراف تست، که من در بالا ذکر کردم، ایجاد می کنیم:

P EM (رنگ: سبز؛)

همانطور که می بینید، سبز رنگ نه تنها متن محتوای پاراگراف است که به طور مستقیم در برچسب قالب بندی EM، یعنی کلمه "Italics"، بلکه متن متن یکی دیگر از برچسب EM است که همچنین شامل تگ قوی است. این اتفاق افتاد زیرا این قانون را با انتخاب متنی اعمال می کند، که در مقایسه با شرکت تابعه، سطح لانه سازی مهم نیست. این تفاوت اصلی بین انتخاب شرکت تابعه و متنی است.

یک مثال دیگر از تعامل متن و انتخابات کودک را با پاراگراف ما در نظر بگیرید. پیروی از قوانین CSS بعدی برای انتخاب شرکت تابعه و زمینه:

div em (رنگ: قرمز؛) p\u003e em (رنگ: سبز؛)

پس از آن، پاراگراف ما چنین طراحی را به دست می آورد:

همانطور که می بینید، یک قطعه متن محصور شده در تگ های EM و قوی در قرمز رنگ شده است، زیرا این امر به قانون انتخابی متنی منصفانه است، یعنی تگ EM در ظروف قوی و DIV و سطح لانه سازی به دست می آید ، همانطور که قبلا اشاره شده است، مهم نیست.

سوال مطرح می شود: چرا کلمه "Italic" است، که همچنین محتوای EM، نقاشی شده در سبز است؟ پس از همه، و برای او قانون انتخاب متنی مرتبط است. اما برای این بخش از متن پاراگراف، قانون انتخاب دختر نیز درست است، زیرا این شرایط را برای انتخاب کودک متناقض نمی کند، این عنصر باید به طور مستقیم برچسب را وارد کند.

واقعیت این است که CSS دارای قانون اولویتی برای خواص CSS در زیر است. به این ترتیب، در این مورد، قانون انتخاب دختر در سند زیر است از سبک های CSS تجویز شده برای انتخاب محدوده کانتینر DIV. بنابراین، کلمه "ایتالیایی" سبز شد. اگر آنها را در بعضی از نقاط تغییر دهید، قانون "P\u003e EM (رنگ: سبز؛)" متوقف می شود و متن متن "Italics" قرمز خواهد بود.

شرح

Pseudo-Class: Nth-Child برای اضافه کردن سبک به عناصر بر اساس عناصر درخت استفاده می شود.

نحو

عنصر: Nth-Child (Odd | حتی |<число> | <выражение>) {...}

ارزش های

عجیب و غریب تمام عناصر عناصر عجیب و غریب. حتی تمام تعداد عناصر. تعداد تعداد توالی عنصر کودک نسبت به والدین آن. شماره گیری با 1 شروع می شود، این اولین عنصر در لیست خواهد بود. این عبارت به شکل AN + B تنظیم شده است، جایی که A و B عدد صحیح، و N - شمارنده که به طور خودکار مقدار 0، 1، 2 را می گیرد ...

اگر صفر باشد، آن را نوشته نشده است و رکورد به b کاهش می یابد. اگر B صفر باشد، آن را نیز مشخص نشده است و بیان به صورت یک نوشته شده است. A و B ممکن است اعداد منفی باشند، در این مورد، علامت پلاس به منفی تغییر می کند، به عنوان مثال: 5n-1.

با توجه به استفاده از مقادیر منفی A و B، برخی از نتایج نیز ممکن است منفی یا برابر صفر باشد. با این حال، تنها مقادیر مثبت بر عناصر تاثیر می گذارد، به دلیل این واقعیت که تعداد عناصر با 1 شروع می شود.

در برگه 1 برخی از عبارات و کلمات کلیدی احتمالی را نشان می دهد، و همچنین مشخص شده است که تعداد عناصر درگیر خواهد شد.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
روغن	16	34	62	74	57
طلا	4	69	72	56	47
چوب	7	73	79	34	86
سنگ ها	23	34	88	53	103

در این مثال، شبه کلاس: Nth-Child برای تغییر سبک ردیف اول جدول، و همچنین برای برجسته کردن رنگ تمام ردیف ها (شکل 1) استفاده می شود.

آخرین به روز رسانی: 04/21/2016

گروه خاصی از pseudoclasss فرم pseudoclasss را تشکیل می دهند که به شما اجازه می دهد برخی از عناصر کودک را انتخاب کنید:

: اولین فرزند: نشان دهنده یک عنصر است که اولین عنصر کودک است

: آخرین فرزند: نشان دهنده یک مورد است که آخرین عنصر فرزند است

: تنها فرزند: یک عنصر را نشان می دهد که تنها تابعه در برخی از کانتینرها است

: تنها نوع: یک مورد را انتخاب می کند که تنها عنصر یک نوع خاص (برچسب) در برخی از ظرف است

: Nth-Child (N): نشان دهنده یک عنصر کودک است که دارای عدد خاصی است، به عنوان مثال، عنصر فرزند دوم

: Nth-last-child (n): یک عنصر کودک را ارائه می دهد که دارای عدد خاصی است، از پایان شروع می شود

: Nth-of-type (n): یک نوع خاص از عنصر کودک را انتخاب می کند که دارای یک عدد خاص است

: nth-last-type (n): یک عنصر کودک از یک نوع خاص را انتخاب می کند که دارای شماره خاصی از انتهای آن است

اولین فرزند کلاس

ما از Pseudoclass اول کودک استفاده می کنیم تا اولین پیوندها را در بلوک ها انتخاب کنیم:

قرص ها

گوشی های هوشمند

Selector Style A: اولین فرزند به پیوند اعمال می شود اگر اولین عنصر فرزند هر عنصر باشد.

و در بلوک دوم، عنصر اول پاراگراف است، به طوری که سبک به هیچ پیوند اعمال نمی شود.

Pseudolass آخرین فرزند

ما از Pseudolass Last-Child استفاده می کنیم:

گوشی های هوشمند

قرص ها

انتخابگر A: آخرین فرزند، سبک را برای مراجع که آخرین عناصر دختر هستند تعیین می کند.

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

تنها فرزند انتخابی

انتخابگر: تنها فرزند عناصر را انتخاب می کند که تنها عناصر دختر در ظروف هستند:

عنوان

پاراگراف ها با متون "text1" و "text4" تنها عناصر کودک در ظروف خارجی خود هستند، بنابراین سبک به آنها اعمال می شود - فونت قرمز.

تنها نوع کلاس

تنها نوع شبه کلاس، یک عنصر را انتخاب می کند که تنها عنصر یک نوع خاص در ظرف است. به عنوان مثال، تنها عنصر DIV، با عناصر دیگر انواع موجود در همان ظرف می تواند تا آنجا که دوست دارید.

تنها پاراگراف و عنصر spun

اگر چه سبک برای عناصر DIV تعریف شده است، اما از آن استفاده نمی شود، از آنجا که ظرف بدن شامل دو عنصر DIV، و نه یک. اما در بدن تنها یک عنصر وجود دارد، بنابراین یک تلیجیت دریافت خواهید کرد. و همچنین در ظرف P وجود دارد تنها یک عنصر یکسان وجود دارد، بنابراین آن را نیز تلطیف می شود.

کلاس شبه نهم کودک

کلاس Nth-Child Pseudo اجازه می دهد تا شما را به سبک هر ثانیه، عنصر سوم، تنها حتی یا تنها اقلام عجیب و غریب، و غیره

به عنوان مثال، تلطیف کردن خطوط صفحه نمایش حتی و عجیب و غریب:

گوشی های هوشمند

سامسونگ	Galaxy S7 Edge	60000
سیب.	آیفون SE	39000
مایکروسافت	لومیا 650.	13500
آلکاتل	بت S4.	30000
Huawei	p9	60000
htc	HTC 10	50000
meizu	طرفدار 6	40000
Xiaomi	MI5.	35000

برای تعیین سبک برای موارد عجیب و غریب، انتخابگر به "عجیب" منتقل می شود:

TR: nth-child (odd) ()

برای یک ظاهر طراحی شده حتی عناصر در انتخاب، مقدار "حتی" منتقل می شود:

tr: nth-child (حتی) ()

همچنین در این انتخابگر می توانیم تعداد عنصر تلطیف شده را انتقال دهیم:

TR: nth-child (3) (پس زمینه رنگ: #BBB؛)

در این مورد، خط سوم تلطیف شده است.

یکی دیگر از فرصت ها، استفاده از یک جایگزین برای یک عدد است که توسط نامه N بیان می شود:

TR: nth-child (2n + 1) (background-color: #BBB؛)

در اینجا سبک به هر رشته عدد دوم اعمال می شود.

تعداد در مقابل n (در این مورد 2) نشان دهنده عنصر کودک است که به شرح زیر اختصاص داده می شود. شماره ای که بعد از علامت پلاس نشان داده می شود، از آن عنصر شما نیاز به شروع انتخاب، یعنی +1 به این معنی است که شما باید از اولین عنصر فرزند شروع کنید.

بنابراین، در این مورد، انتخاب با عنصر 1 آغاز می شود، و موارد زیر منتشر شده است 2 * 1 + 1 \u003d 1 \u003d 3rd عنصر، به ترتیب 2 * 2 + 1 \u003d 1 \u003d المان و غیره.

به عنوان مثال، اگر ما می خواهیم هر عنصر سوم را اختصاص دهیم، از دوم شروع می کنیم، می توانیم بنویسیم:

TR: Nth-Child (3n + 2) (پس زمینه رنگ: #BBB؛)

Pseudo-Class: Nth-last-child اساسا یک عملکرد مشابه را فراهم می کند، تنها شمارش معکوس از عناصر از ابتدا نیست، اما از پایان:

tr: nth-last-child (2) (background-color: #bbb؛ / * 2 خط از پایان، یعنی Penultimate * /) TR: Nth-Last-Child (2n + 1) (پس زمینه رنگ : #EEE؛ / * خطوط عجیب و غریب، از پایان * /)

کلاس شبه نوع nth

Pseudo-Class: Nth-of-type به شما اجازه می دهد یک عنصر کودک یک نوع خاص را در یک شماره خاص انتخاب کنید:

TR: nth-type (2) (پس زمینه رنگ: #BBB؛)

به طور مشابه، Nth-Last-Class Class کار می کند، تنها در حال حاضر شمارش معکوس از عناصر از پایان می آید:

TR: nth-last-type (2n) (background-color: #BBB؛)

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

به طوری که مشکل قابل فهم تر است، بیایید یک مثال کوچک بگذاریم. اجازه دهید ما چنین داشته باشیم کد HTML:

وظیفه ما این است که فقط قرمز شود " پاراگراف دوم"اگر ما با استفاده از انتخاب متن بنویسیم:

ظرف P (
رنگ: قرمز؛
}

که ما هر دو پاراگراف را قرمز می کنیم که ما نیازی به آن نداریم. این وظیفه بسیار ساده است انتخاب کنندگان دختر در CSS:

کانتینر\u003e P (
رنگ: قرمز؛
}

همه چیز، حالا ما فقط قرمز شده ایم " پاراگراف دوم"از آنجا که این پاراگراف به طور مستقیم شرکت تابعه است .container. ولی " پراگراف اول"یک شرکت تابعه برای داخلی است دیابنابراین، تحت عمل انتخاب کودک، سقوط نمی کند.

این کار به راحتی حل می شود، با این حال، یک منهای بزرگ وجود دارد انتخاب کنندگان دختر در CSS - آنها در مرورگرها کار نمی کنند اینترنت اکسپلورر.. به همین دلیل، استفاده آنها بسیار نامطلوب است. اما اگر شما به طور ناگهانی در جایی دیدار کنید، حالا شما می دانید که این نوع انتخاب کننده ها به معنی و چه کاری انجام می شود.

وظیفه اصلی این انتخابگر از نام آن پیروی می کند و شامل دسترسی به عنصر کودک می شود. نمایش با کمک یک علامت ابتدایی "\u003e"، که یک عنصر کودک را با یک عنصر والدین متصل می کند. همچنین لازم به ذکر است که انتخابگر ساده در گردش استفاده می شود. به عنوان مثال، کدگذاری زیر را در نظر بگیرید:

عنصر\u003e ul (padding- top: 20px؛)

این کدگذاری به این معنی است که یک ضایعات داخلی از 20 پیکسل از لبه بالا به لیستی که در عنصر سرمایه گذاری می شود اعمال می شود. حضور در این آیکون ورودی "\u003e" نشان می دهد که این قانون فقط به لیست های سطح اول لانه سازی اعمال می شود.

تجزیه و تحلیل دقیق از انتخاب کار عنصر کودک

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

به روشنی ترسیدن کار اپراتور فرعی به مثال زیر کمک خواهد کرد:

div\u003e r (رنگ: # ff0000؛ / * قرمز * /)

< div> این رشته یک متن سیاه و سفید پیش فرض دارد.< span> این خط به دلیل این واقعیت است که P یک برچسب دختر برای دیوا است. < p> دوباره نامه های سیاه را می بینیم.< span> در اینجا ما همچنین شخصیت های سیاه را می بینیم، زیرا برای این فاصله، والدین برچسب هستند.

این مثال، کار اپراتور فرعی را با توجه به درجه لانه سازی تایید می کند.

محدودیت برای استفاده از یک اپراتور فرعی

شایان ذکر است که این عملیات توسط تمام مرورگرهای غیر از اینترنت اکسپلورر افسانه ای پشتیبانی می شود. 6. من فکر می کنم تعداد کمی از افراد با استفاده از این مرورگر وجود دارد، اما اگر چنین Unicumes در دسترس باشد، پس از آن برای آنها راهی برای خروج از وضعیت وجود دارد در یک مقاله جداگانه شرح داده شود.

چرا اعمال می شود

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

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

اصلی\u003e سربرگ ( / * ثبت نام فقط به دنگ اصلی اعمال می شود * / }

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

جمع کردن

بنابراین، اپراتور فرعی را می توان نه تنها برای طراحی منوهای کشویی، بلکه همچنین برای بهینه سازی کوچک از منابع اینترنتی خود برای کار روبات های جستجو استفاده کرد.