انتخابگرهای CSS مجاور، انتخابگر جهانی و کاربردهای آنها. CSS Child and Neighbor Selectors Css Neighbor Elements

توضیحات

عناصر یک صفحه وب زمانی مجاور نامیده می شوند که بلافاصله در کد سند به دنبال یکدیگر باشند.

نحو

E + F (توضیح قوانین سبک)

برای کنترل سبک عناصر مجاور، از علامت مثبت (+) استفاده کنید که بین دو انتخابگر E و F قرار می گیرد. فاصله های اطراف پلاس اختیاری هستند. این سبک برای عنصر F اعمال می شود، اما تنها در صورتی که در مجاورت عنصر E باشد و بلافاصله از آن پیروی کند. بیایید به چند نمونه نگاه کنیم.

لورم ایپسوم دلبرآمت بنشین

برچسب بزنید فرزند تگ است

چون داخل این ظرف است. به ترتیب

به عنوان والدین عمل می کند .

لورم ایپسوم دلبر بنشینآمت

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

لورم ipsumدولور سیت آمت، سازندهآدیپیسینگ نخبگان.

برچسب های همسایه اینجا هستند و ، و همچنین و . در عین حال و عناصر مجاور درمان نمی شوند زیرا ظرفی بین آنها وجود دارد .
HTML5 CSS 2.1 IE Cr Op Sa Fx انتخابگرهای مجاور لورم ipsumدولور سیت آمت، سازندهنخبگان لاغری لورم ایپسوم دولور سیت آمت، سازندهنخبگان لاغری نتیجه این مثال در شکل نشان داده شده است. 1. برنج. 1. رنگ متن قرمز برای انتخابگرهای مجاور مرورگرها مرورگر اینترنت اکسپلورراگر نظری بین انتخابگرها وجود داشته باشد (B + /* به علاوه */ I ) 7 استایل را اعمال نمی کند. انتخابگر عنصر مجاور عنصری را انتخاب می کند که در کد سند مستقیماً در پشت عنصر مشخص شده دیگری قرار دارد. بیایید یک قطعه کد html را به عنوان مثال در نظر بگیریم. پاراگراف و در آن چربعنصر، و اینجاست متمایل شدعنصر سه برچسب وجود دارد: , و . برچسب ها و تو در یک ظرف آنها فرزندان او هستند. اما در رابطه با یکدیگر همسایه هستند. نحو یک انتخابگر مجاور، انتخابگر عنصر قبلی است، به دنبال آن علامت "+" و پس از آن انتخابگر عنصر انتخاب شده است. بیایید انتخابگر مجاور را کار کنیم: انتخابگر مجاور در CSS. پاراگراف و در آن چربعنصر، و اینجاست متمایل شدعنصر اینجا چربو تاکید کردعناصر، بیشتر متمایل شد. در مثال می توانید ببینید که انتخابگر عنصر مجاور در پاراگراف اول فعال شده است. در اینجا برچسب ها هستند و یکی پس از دیگری بروید و در پاراگراف دوم از تگ بین آنها استفاده شده است ، اکنون دو جفت تگ مجاور دیگر وجود دارد: + و + . خطا در در این موردتگ را خواهد شمرد در مجاورت تگ اینجا را تگ کنید فرزند تگ است و او نیز به نوبه خود یک پدر و مادر است . مثال زیر کار نخواهد کرد: انتخابگر مجاور در CSS. پاراگراف و در آن چربعنصر، و اینجاست متمایل شدعنصر اینجا چربو تاکید کردعناصر، بیشتر متمایل شد. مثال واقعی تر بیایید با استفاده از یک مثال واقعی تر به نحوه عملکرد انتخابگر مجاور نگاه کنیم. در مقالات بزرگ حاوی چندین بخش که با برچسب مشخص شده اند ، توصیه می شود حاشیه بالایی (مخصوص مارجین بالا) را افزایش دهید. تورفتگی 30 پیکسلی متن را خوانا می کند. اما اگر برچسب بلافاصله بعد از آن می آید ، و این می تواند در ابتدای مقاله، تورفتگی بالای بالای برچسب باشد اضافی خواهد بود. این مشکل را می توان با استفاده از انتخابگر عنصر مجاور حل کرد. در اینجا کد html با مثالی از نحوه عملکرد انتخابگر عنصر مجاور آورده شده است. انتخابگر مجاور در CSS سلام! عنوان h2 عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. همچنین، با استفاده از ابزار انتخاب مجاور، تنظیم تورفتگی بین عنوان و پاراگراف اول بخش راحت است، در مثال ما اینها برچسب ها هستند. و همچنین شایان ذکر است که برای کاهش فرورفتگی استفاده از مقادیر منفی راحت است. انتخابگر مجاور در CSS سلام! عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. عنوان h2 متن پاراگراف در مورد ماجراهای باورنکردنی است. اکنون مثالی از نحوه استفاده از یک انتخابگر مجاور برای انتخاب همه عناصر لیست به جز اولین مورد. انتخابگر مجاور در CSS مورد فهرست شماره 1. مورد فهرست شماره 2. مورد فهرست شماره 3. مورد فهرست شماره 4. این چیزی است که در نتیجه این مثال اتفاق می افتد: شکل 1. مثال شماره 5 در محل کار. 1 ژوئن 2015 در مقابل، همسایه ها کمتر مورد استفاده قرار می گیرند. تفاوت اصلی این است که آنها باید از دیگری پیروی کنند. تا درک آن برای شما آسان تر شود این موضوع، من پیشنهاد می کنم این ساختار را تجزیه کنید: <тег1> <тег2> <тег3> <тег4> <тег5><тег6>... همانطور که احتمالا از درس قبلی حدس زده اید، برچسب های 2، 3، 4، 5، 6 انتخاب کننده زمینه برای برچسب 1. به نوبه خود، انتخابگرهای همسایه عبارتند از: tag2 و tag3، tag4 و tag5، اما در عین حال برچسب 2و برچسب 4مجاور نیستند ویژگی های سبک برای آخرین عنصری که به عنوان مجاور مشخص می کنید اعمال می شود. فقط باید دستور انتخابگرها را رعایت کنید. نحو کلی نوشتن به این صورت است: Selector1 + selector2+ ...+selectorN ( خاصیت 1: مقدار؛ خاصیت 2: مقدار؛ ... خاصیتN: مقدار) بیایید به این مثال نگاه کنیم: انتخابگرهای مجاور سرفصل برچسب بزنید صانتخابگر مجاور تگ است h1 این متن باید سبز باشد همسایه انتخابگرهای CSS انتخابگرهای CSS همسایه، یا انتخابگرهای خواهر و برادر، به شما این امکان را می دهند که در مواردی که قبل از عنصر خاصی در کد HTML ظاهر می شود، استایل ها را به یک عنصر اعمال کنید، یعنی عناصر در این مورد باید در همان سطح تودرتو باشند. . انتخابگرهای همسایه نیز ترکیبی هستند و از انتخابگرهای ساده (کلاس ها، شناسه ها و غیره) تشکیل شده اند. برای اینکه به وضوح بفهمید که عناصر مجاور چیست، بیایید دوباره به یک مثال آشنا نگاه کنیم، فقط کمی اصلاح شده است. <тег1> <тег2>... <тег3><тег4>... <тег5><тег6>... در این مثال فقط دو جفت عنصر مجاور وجود دارد - اینها هستند<тег2>و<тег3>، و همچنین<тег3>و<тег5>، همه یعنی<тег2>و<тег5>دیگر در رابطه با یکدیگر همسایه نیستند، زیرا بین آنها وجود دارد<тег3> . انتخابگرهای مجاور از دو یا چند انتخابگر معمولی تشکیل می شوند که با علامت "+" (به اضافه) از هم جدا شده اند، جایی که اولین عنصر در کد ابتدا نشان داده می شود، سپس عنصری که بعد از آن می آید، سپس عنصری که بلافاصله بعد از دومی می آید. ، و غیره. طبق معمول، استایل ها برای عنصری که انتخابگر آن آخرین لیست است اعمال می شود. نحو عمومی انتخابگر 1 + انتخابگر 2 ( دارایی: ارزش; دارایی: ارزش; ...) فضاهای دو طرف علامت "+" را می توان به دلخواه قرار داد یا خیر. نمونه ای از استفاده از انتخابگرهای مجاور در CSS انتخابگرهای مجاور سرفصل متن قویمتن Em متن Emمتن قوی متن Emمتن قوی نتیجه در مرورگر سرفصل متن قوی متن Em متن Em متن Em متن قویدر این مثال، فقط پاراگراف اول با متن قرمز و فقط پاراگراف دوم زیر خط کشیده شده اند زیرا هیچ عنصر دیگری با قوانین سبک مطابقت ندارد. به ویژه، محتوای عنصر در این مورد سبز نخواهد بود، زیرا نه یک، بلکه دو پاراگراف از عنوان جدا می شود. ضمنا همانطور که می بینید در سبک دوم انتخابگرهای مجاور و فرزند به یکباره مشخص شدند. بنابراین من تصمیم گرفتم یک بار دیگر به شما یادآوری کنم که انتخاب کنندگان انواع مختلف می توان آزادانه ترکیب کرد. Internet Explorer 6.0 انتخابگرهای مجاور (یا انتخابگرهای فرزند) را درک نمی کند. این را به خاطر بسپار مشق شب.

توضیحات

نحو

مرورگرها

مثال واقعی تر

، توصیه می شود حاشیه بالایی (مخصوص مارجین بالا) را افزایش دهید. تورفتگی 30 پیکسلی متن را خوانا می کند. اما اگر برچسب

بلافاصله بعد از آن می آید

، و این می تواند در ابتدای مقاله، تورفتگی بالای بالای برچسب باشد

سلام!

عنوان h2

عنوان h2

عنوان h2

عنوان h2

سلام!

عنوان h2

عنوان h2

عنوان h2

عنوان h2

سرفصل

همسایه انتخابگرهای CSS

سرفصل

انتخاب سردبیر