عناصر مجاور CSS. انتخاب های ویژه در CSS

ولادی مرزویچ

همسایگان عناصر صفحه وب زمانی که آنها پس از یکدیگر در کد سند پیروی می کنند. چند نمونه از رابطه عناصر را در نظر بگیرید.

لورم اپیسوم. دلم نشستن amet

در این مثال برچسب یک شرکت تابعه در رابطه با برچسب است

از آنجایی که در داخل این ظرف قرار دارد. به ترتیب

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

لورم اپیسوم. دلم نشستن amet

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

لورم ipsum Dolor Sit Amet، consectetuer adipisting ائتلاف.

همسایه اینجا برچسب ها هستند و ، همچنین و . که در آن و عناصر همسایه به دلیل این واقعیت که ظرف بین آنها وجود دارد، تعلق ندارند .
برای کنترل سبک عناصر مجاور، یک نماد پلاس (+) استفاده می شود که بین دو انتخابگر نصب شده است. نحو عمومی بعدی است. انتخاب 1 + انتخاب 2 (شرح قوانین سبک) فضاهای اطراف مزیت مورد نیاز نیست، سبک با چنین ورودی به انتخاب 2 اعمال می شود، اما تنها در صورتی که برای انتخاب 1 مجاور باشد، باید بلافاصله پس از آن باشد. به عنوان مثال 11.1، ساختار تعامل برچسب ها بین آنها نشان داده شده است. مثال 11.1 استفاده از انتخاب کننده های همسایه HTML5 CSS 2.1 IE CR OP SA FX انتخاب کننده های همسایه لورم ipsum Dolor Sit Amet، consectetuer elit adipisting Lorem Ipsum Dolor Sit Amet، consectetuer elit adipisting نتیجه نمونه در شکل نشان داده شده است. 11.1 شکل. 11.1 انتخاب متن با کمک انتخاب کننده های همسایه در این مثال، تغییر رنگ متن برای محتویات کانتینر رخ می دهد. هنگامی که آن را بلافاصله پس از ظرف قرار می گیرد . در پاراگراف اول، این وضعیت اجرا می شود، بنابراین کلمه "consectetuer" در مرورگر در قرمز نمایش داده می شود. در پاراگراف دوم، اگر چه یک برچسب وجود دارد اما درب بعدی هیچ برچسب نه، به طوری که سبک به این ظرف اعمال نمی شود. ما یک مثال عملی تر را تجزیه و تحلیل خواهیم کرد. اغلب نیاز به متن مقاله وجود دارد که شامل پانویسهای مختلف و یادداشت ها باشد. معمولا برای این منظور، یک کلاس سبک جدید ایجاد شده و از آن به پاراگراف استفاده می شود، به طوری که شما به راحتی می توانید نوع متن را تغییر دهید. اما ما به راه دیگری خواهیم رفت و از انتخاب کننده های همسایه استفاده می کنیم. برای برجسته کردن نظرات، ایجاد یک کلاس جدید، آن را SIC تماس بگیرید، و ما آن را به برچسب اعمال می کنیم . پاراگراف اول پس از چنین هدر، رنگ پس زمینه و ضخامت (مثال 11.2) برجسته شده است. دیدگاه پاراگراف های باقی مانده بدون تغییر باقی خواهد ماند. مثال 11.2 تغییر سبک پاراگراف HTML5 CSS 2.1 IE CR OP SA FX تغییر سبک پاراگراف روش های ماهیگیری شیر در صحرا روش یکپارچگی سازگار اجازه دهید شیر با ابعاد L X W X H، جایی که L طول شیر از نوک بینی به دم Tains، W عرض شیر است، و H ارتفاع آن است. پس از آن، صحرا به تعدادی از مستطیل های ابتدایی تقسیم می شود، اندازه آن با عرض و طول شیر همخوانی دارد. با توجه به اینکه شیر ممکن است به شدت در یک منطقه مشخص نیست، اما در عین حال در دو مورد از آنها، یک سلول برای ماهیگیری باید از یک منطقه افزایش یافته، یعنی 2L X 2W ساخته شود. با تشکر از این، ما از اشتباهات اجتناب می کنیم، زمانی که تنها نیمی از شیر در قفس گرفتار می شود و یا بدتر، فقط دم خود را. یادداشت مهم برای ساده سازی محاسبات، دم به عنوان یک خطای اندازه گیری می تواند از بین برود و به حساب نمی آید. نتیجه این مثال در شکل نشان داده شده است. 11.2 شکل. 11.2 تغییر نوع پاراگراف به دلیل استفاده از انتخاب کننده های همسایه در این مثال، متن با استفاده از پاراگراف ها فرمت شده است (برچسب ) اما رکورد H2.SIC + P سبک را فقط برای پاراگراف اول تگ تنظیم می کند که کلاس اضافه شده به نام SIC. انتخاب کننده های همسایه مناسب برای استفاده از این برچسب ها هستند که به طور خودکار به طور خودکار برای تنظیم مقدار bulbing اضافه می شوند. به عنوان مثال، اگر برچسب ها در یک ردیف وجود داشته باشد و ، فاصله بین آنها آسان است برای تنظیم فقط با کمک انتخاب کننده های همسایه. به طور مشابه، مورد نیز برای برچسب های آینده است و و همچنین در موارد مشابه دیگر. به عنوان مثال 11.3، این شیوه مقدار بین تگ های مشخص شده را تغییر می دهد. مثال 11.3 بین سرفصل ها و متن ها HTML5 CSS 2.1 IE CR OP SA FX انتخاب کننده های همسایه عنوان 1 عنوان 2 پاراگراف از زمان استفاده از انتخاب کننده های همسایه، سبک فقط به عنصر دوم اعمال می شود، اندازه های دندانها به علت افزودن ارزش منفی در اموال حاشیه ای کاهش می یابد. در این مورد، متن صعود می کند، نزدیک به عنصر قبلی است. سوالات برای چک کردن 1. چه تگ ها در این کد مجاور هستند؟ فرمول اسید سولفوریک:H. ₂بنابراین. ₄ و و و _و و 2. یک کد HTML زیر وجود دارد.: قضیه بزرگ فارما ایکس. ^n. + Y. ^n. \u003d Z. ^n. جایی که n یک عدد صحیح است\u003e 2 کدام متن با استفاده از سبک Sup + Sup (رنگ: قرمز؛) قرمز برجسته شده است؟ دوم "n" دوم و سوم "n". سلام، خوانندگان عزیز! ادامه موضوع انتخاب کننده های CSS را ادامه دهید و امروز سعی خواهم کرد توضیح دهم که چه چیزی است انتخاب کننده های CSS همسایه، و همچنین نقش نقش انتخاب جهانی. شناخت مکانیزم استفاده از تمام انواع صندوق های CSS، محتوای مطلوب و جمع و جور سند را به دست می آورد که سبک عناصر را توصیف می کند که یکی از اجزای ارتقاء موفقیت آمیز منابع آن است، به طوری که در هیچ موردی غفلت نیست امکان دستیابی به اطلاعات مفید در مورد مفهوم انتخابگر و انواع مختلفی از گونه ها. اگر به یاد داشته باشید و به دقت از انتشارات پیروی کنید، بسیاری از انتخابات قبلا در نظر گرفته شده اند؛ ؛ . من دوباره می خواهم که مطالعه پایه های CSS را نادیده بگیریم، زیرا در آینده به شما می دهد. انتخاب جهانی در حال حاضر به طور مستقیم به ماهیت انتشار امروز بروید. همانطور که برای انتخاب جهانی، کاملا ساده است، بنابراین من برای مدت طولانی بر روی آن متوقف نخواهم شد. نحو نوشتن قوانین CSS، که از انتخاب جهانی استفاده می کند، زیر: در اینجا اپراتور "*" است و به این معنی است که ما یک انتخاب جهانی داریم. این مورد استفاده می شود زمانی که لازم است یک سبک واحد را برای همه موارد در صفحه وب تنظیم کنید. گاهی اوقات انتخاب جهانی لزوما مشخص نمی کند. به عنوان مثال، ضبط * کلاس I.Class در این موارد کاملا یکسان است. در حال حاضر لزوما یک مثال است. به طور معمول، رایج ترین تعریف یک فونت واحد، اندازه و رنگ، و همچنین مکان متن معمول در صفحه وبلاگ یا سایت است. * (فونت خانواده: Tahoma، Arial، Helvetica، Sans-Serif؛ / * فونت برای متن * / رنگ: # 646464؛ / * رنگ متن * / فونت اندازه: 75٪؛ / * اندازه متن * / متن تراز : چپ؛ / * مکان متن * /) بنابراین، شما می توانید طراحی متن را برای تمام مواردی که در صفحه قرار گرفته اند تعریف کنید. من یادآوری می کنم، برای یک مورد خاص، نتیجه مشابه خواهد بود اگر به جای یک انتخابگر جهانی از نام برچسب بدن استفاده کنید، که شامل برچسب های تمام عناصر است. انتخاب کننده های CSS همسایه خوب، در حال حاضر زمان کمی بیشتر برای انتخاب کننده های همسایه پرداخت می شود. همسایگان عناصر صفحه وب زمانی که آنها به طور مستقیم در کنار یکدیگر در کد سند قرار دارند. در عین حال، Syntax سبک CSS این نوع را دارد: در حال حاضر ما پاراگراف متن را با برچسب P تعریف می کنیم که در آن برچسب های B، I و BIG به عنوان عناصر کودک گنجانده می شود، که به ترتیب فرمت متن را تعریف می کند، به ترتیب، انتشار جسورانه، کج و ایزوله با افزایش فونت: این پاراگراف استفاده می کند برچسب ب, برچسب I., برچسب بزرگ. و با استفاده از ابزار ویرایش CSS و HTML، که در آخرین نسخه های مرورگرهای محبوب (،) تعبیه شده است و آنالوگ از پلاگین معروف برای مرورگر فایرفاکس () است، این پاراگراف را به هر مکان به طور کامل وارد کنید هر صفحه وب (من درست در صفحه مقاله قبلی با پاراگراف اول انجام دادم). این به این معنی است که به عنوان مثال، به سادگی با فشار دادن کلید F12 نامیده می شود. این می تواند مورد استفاده قرار گیرد به طور عملا رفع سرفصل های مواد "اصول اولیه HTML" و "CSS Textbook". بنابراین، من یک قطعه متن را به صورت پاراگراف اول وارد می کنم: این پاراگراف تجربی خواهد بود و با استفاده از مثال آن مورد توجه قرار می گیرد. انتخاب کننده های همسایه. همانطور که قبلا گفتم، برچسب ها، من و بزرگ، شرکت های تابعه برای برچسب Paragraph P هستند، زیرا همه آنها به طور مستقیم در داخل ظرف P هستند. در اینجا، همسایه برچسب های B و من، و همچنین بزرگ است. در حال حاضر قانون CSS را برای انتخاب کننده های همسایه اعمال کنید: B + I (رنگ: قرمز؛) i + بزرگ (رنگ: سبز؛) پس از اعمال این سبک ها، پاراگراف به نظر می رسد: این درست است برای تمام تگ های صفحه وب، که شامل عناصر B، من و بزرگ است. علاوه بر این، باید B و I، I و BIG BIG، برای سایر ترکیبات وجود داشته باشد، این CSS کار نخواهد کرد. من فکر می کنم اکنون برای شما روشن است که چگونه انتخاب کنندگان همسایه هنگام نوشتن یا ویرایش یک سند CSS اعمال می شود. یکی دیگر از نکات بسیار مهم: اگر وقت خود را برای اطلاع، پس از آن در مورد موارد مجاور، سبک مشخص شده تنها به عنصر دوم اعمال می شود. یک مثال با پاراگراف، که بسیار بصری بود و به شما اجازه می دهد تا به سرعت درک ماهیت انتخاب کننده های همسایه در CSS را درک کنید. با این حال، در عمل، سایر زمینه های استفاده از انتخابگرها معمولا استفاده می شود. می گویند، اغلب در بدن مقاله لازم است که شامل برخی از متن متن، به خصوص تزئین شده، مانند آن: پانویسها، یادداشت ها و غیره برای این اهداف، یک کلاس جداگانه معمولا آن را به پاراگراف لازم تبدیل می کند. اما راه بسیار مطلوب، استفاده از انتخاب کننده های همسایه است. به عنوان مثال، در وبلاگ من سبکهای ایجاد شده برای ثبت نام هدر معمولی H3 وجود دارد. H3 (اندازه فونت: 1.7EM؛ / * اندازه فونت * / متن تراز: مرکز؛ / * قرار دادن متن * / فونت وزن: عادی؛ / * طراحی متن عادی * / فونت صورتی: Tahoma، Arial، Helvetica، Sans-serif؛ / * سبک فونت * / رنگ: # 646464؛ / * رنگ متن * /) برای برجسته کردن یادداشت های عنوان یا پانویسها، یک کلاس ویژه را تنظیم کنید، بگو: h3.put (رنگ: قرمز؛ / * رنگ متن * / حاشیه سمت چپ: 5px؛ / * عقب نشینی در سمت چپ * / حاشیه بالا: 0.5em؛ / * detent از بالا * / padding: 10px؛ / * فیلدهای اطراف متن * / متن align: left؛ / * محل متن * /) در حال حاضر ما از انتخاب کننده های مجاور استفاده می کنیم تا سبک خاصی از پاراگراف جمله را ایجاد کنیم، این پاراگراف به طور مستقیم تحت عنوان با سبک "H3.Put" قرار می گیرد: h3.put + p (background: # ffefd5؛ / * رنگ پس زمینه * / حاشیه سمت چپ: 15px؛ / * عقب نشینی در سمت چپ * / حاشیه راست: 120px؛ / * عقب نشینی در سمت راست * / margin-top: 0.5 EM؛ / * از بالا * / padding: 5px؛ / * فیلدهای اطراف متن * /) باز هم، با استفاده از ابزار ویرایش Google Chrome، با شما تمام گوش های شما (اما ارزشش را دارد)، هدر را برای پانویس ها وارد کنید، فراموش نکنید که آن را برای او توسط کلاس قرار دهید: توجه! سپس متن پدربزرگ خود را بنویسید: مواد ارائه شده در این نشریه از لحاظ مطالعه پایه های CSS (جداول سبک آبشار) بسیار مهم هستند. پس از تمام این تلفات، ما چنین پاراگراف پاراگراف را در صفحه وب دریافت می کنیم (به شما یادآوری می کنم که این پاراگراف من در پایان مقاله من در مورد شرکت های تابعه و انتخاب های متنی من قرار داده ام): در حال حاضر در یک وبلاگ یا سایت زمانی که اتصال "put" به هر برچسب H3، چنین پاورقی در صفحه وب شارژ خواهد شد. علاوه بر این، آن را به روش خاص تزئین شده تنها پاراگراف اول پس از برچسب H3 با "class \u003d" قرار داده شده است. اما این دقیقا همان چیزی است که ما به دست آوردیم، درست است؟ در این مورد، اجازه دهید به پایان برساند، کتابچه راهنمای امروز، که شامل یک الگوریتم برای استفاده از همسایه، و همچنین انتخاب کنندگان جهانی بود. امیدوارم این مقاله از شما محو شود، خوانندگان عزیزم به اشتراک گذاشته می شوند 1 ژوئن 2015. بر خلاف مجاورت، اغلب کمتر استفاده می شود. تفاوت اصلی این است که آنها باید از دیگران پیروی کنند. برای اینکه شما این موضوع را آسان تر کنید، پیشنهاد می کنم این ساختار را از بین ببرم: <тег1> <тег2> <тег3> <тег4> <тег5><тег6>... همانطور که شما احتمالا از درس قبلی حدس زده اید، این برچسب ها 2، 3، 4، 5، 6 انتخاب کننده های متنی هستند برچسب 1. به نوبه خود، انتخابگر همسایه خواهد بود: tAG2 و TAG3، TAG4 و TAG5، اما در همان زمان برچسب 2 و برچسب 4 مجاور نیستند خواص سبک به آخرین عنصر که بعدا مشخص می کنید اعمال می شود. شما فقط باید انتخاب انتخاب را دنبال کنید. نحو کلی نوشتن است: Selector1 + Selector2 + ... + Selectorn (Property1: Value؛ Property2: Value؛ ... Property: Value) بیایید با شما این مثال را در نظر بگیریم: انتخاب کننده های همسایه عنوان تگ پ. یک انتخابگر همسایه برچسب گذاری شده است h1. این متن باید سبز باشد انتخاب عنصر مجاور عنصر را در کد سند به طور مستقیم پس از یک عنصر مشخص شده انتخاب می کند. بگذارید یک قطعه از کد HTML را به عنوان مثال بگیریم. پاراگراف و در آن چرب عنصر و اینجا شیب دار عنصر سه برچسب وجود دارد: , و . برچسب ها و در ظرف قرار گرفته است آنها یک شرکت تابعه نسبت به او هستند. اما در رابطه با یکدیگر همسایه هستند. نحو انتخاب کننده مجاور: انتخاب عنصر قبلی، علامت "+" و انتخاب مورد انتخاب شده است. بیایید در یک انتخابی نزدیک کار کنیم: انتخاب همسایه در CSS. پاراگراف و در آن چرب عنصر و اینجا شیب دار عنصر اینجا چرب و انجام شده عناصر، پشت شیب دار. در مثال، می توان انتخاب کرد که انتخاب عنصر مجاور در پاراگراف اول کار می کرد. اینجا برچسب ها و برو به یکدیگر. و در پاراگراف دوم بین آنها برچسب استفاده شد در حال حاضر دو جفت دیگر همسایه وجود دارد: + و + . یک خطا در این مورد برچسب را در نظر می گیرد مجاور برچسب اینجا برچسب یک شرکت تابعه در رابطه با برچسب است و او، به نوبه خود، پدر و مادر است . مثال زیر کار نخواهد کرد: انتخاب همسایه در CSS. پاراگراف و در آن چرب عنصر و اینجا شیب دار عنصر اینجا چرب و انجام شده عناصر، پشت شیب دار. یک مثال واقعی بیایید به کار انتخاب کننده همسایه در یک مثال واقعی نگاه کنیم. در مقالات بزرگ حاوی چندین پارتیشن تعیین شده برچسب ها مطلوب است برای افزایش اندام فوقانی (اموال مارجین بالا). یک ضمانت به 30px به خوانایی متن ارائه می دهد. اما در مورد برچسب بلافاصله پس از آن ، و این ممکن است در ابتدای مقاله باشد، Veri endent بیش از برچسب این اضافی خواهد بود. شما می توانید این کار را با استفاده از انتخاب عنصر مجاور حل کنید. در اینجا یک کد HTML با نمونه ای از انتخاب عنصر همسایه است. انتخاب همسایه در CSS هی هدر H2 هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. همچنین با استفاده از ابزار انتخابی مجاور به راحتی تعویض بین عنوان و پاراگراف اول بخش را تنظیم می کند، در مثال ما این برچسب ها هستند و همچنین لازم به ذکر است که برای کاهش اندام، استفاده از مقادیر منفی مناسب است. انتخاب همسایه در CSS هی هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. هدر H2 متن پاراگراف در مورد ماجراهای باور نکردنی. در حال حاضر یک مثال از چگونگی کمک به یک انتخابگر همسایه، تمام موارد لیست را انتخاب کنید به جز اولین. انتخاب همسایه در CSS لیست شماره شماره 1. لیست شماره شماره 2 فهرست شماره شماره 3. فهرست شماره شماره 4 این چیزی است که منجر به کار این مثال می شود: شکل 1. عملیات مثال شماره 5. همکاران عزیزم عزیزم، امروز ما دو نفر دیگر را بررسی خواهیم کرد انتخاب کنندهبه نام شرکت های وابسته به CSS و انتخاب کنندگان مجاور. تا حدودی، ممکن است بدون آنها انجام شود، اما برای توسعه شما، آنها باید جذب شوند، و گاهی اوقات اعمال می شود که آنها در حافظه شما باقی می مانند. بنابراین، ما بحث خواهیم کرد انتخاب کننده آنها مجاور هستند و شرکت های تابعه او چه هستند و مثال را درک می کنند. شرکت های تابعه CSS - عناصری که در داخل عنصر والدین قرار دارند. یک مثال از این ممکن است به شرح زیر باشد. ما یک بلوک داریم که در آن یک پاراگراف، یک بلوک دیگر و تصویر وجود دارد. این سه عنصر شرکت های تابعه هستند. اگر عناصر دیگر نیز در بلوک کودک قرار داشته باشند، آنها دیگر در بلوک اول شرکت های تابعه دیگر نیستند، اما در بلوک هایی که به طور مستقیم هستند، شرکت های تابعه ای هستند. امیدوارم جوهر را گرفتی انتخاب کننده های CSS همسایه - عناصر در هر کدام در کد سند قرار دارند. یک مثال از این است. ما یک پاراگراف و برچسب زیر داریم طول. همه چیز خیلی واضح است، اما ما فقط باید همه اینها را در نمونه های واقعی جدا کنیم. متن در پاراگراف متن در عرض دیگر متن کودک در پاراگراف نیست با کمک سبک ها همان نتیجه را برای برچسب اضافه کنید طول دیا \u003e فاصله ( فونت اندازه: 200٪؛ } پ. + فاصله ( رنگ: قرمز؛ } نتیجه کد در هر دو مورد به برچسب اعمال می شود طولاز آنجا که این یک شرکت تابعه در رابطه با برچسب است دیا و بعد بعد از برچسب پ.. بنابراین، فونت دو برابر بیشتر و قرمز تبدیل شده است. حالا ما به طور کامل با آن برخورد کردیم شرکت های تابعه و انتخاب کنندگان مجاور در CSSو شما فقط می توانید دانش خود را در عمل تقویت کنید، به زودی!