انتخابگر پسزمینه CSS چیست؟

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

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

انتخاب کننده نسل CSS به عناصر موجود در عنصر دیگری اعمال می شود (یا دقیق تر، عنصر که نسخۀ دیگری از عنصر است). به عنوان مثال، یک فهرست غیر ارادی دارای برچسب با برچسب ها به عنوان فرزندان است. بیایید از HTML زیر به عنوان مثال استفاده کنیم.

• این لینک است

  برچسب های LI به نسل از برچسب UL است. برچسب A یک نسل از هر دو LI (فرزند فرزند) و UL (نوادگان نوه) برچسب است. اگر شما در مورد این فکر می کنید با استفاده از مثال درخت خانواده،

  پدر و مادر خواهد بود،
  • فرزند این عنصر خواهد بود، و فرزند
  • و نوه ای از
    .

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

    li a {متن دکوراسیون: none؛ }

    در این مثال، سبک ها فقط برای یک عنصر پیوند () که یک عنصر از عنصر item item است (

    • ) اعمال می شود. تمام پیوندهای دیگر روی صفحه که نسخهای از یک آیتم لیست نیستند این سبک را دریافت نخواهند کرد.

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

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

      ul a {text-decoration: none؛ }

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

      ul li a {text-decoration: none؛ }

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

      با استفاده از انتخابگرهای کلاس و انتخابگرهای ID

      انتخابگرهایی که از نزولی میبینید، همیشه نباید نوع نسل باشند. به عنوان مثال، تصور کنید که شما دارای یک منطقه از سایت (مانند یک بخش) با شناسه شناسه "بیلبورد". شما می توانید انتخاب یک نسل از این شناسه را تنظیم کنید:

      #billboard ul {background-color: #ccc؛ }

      این لیست لیست غیر ارادی که یک نسل از یک عنصر با شناسه «بیلبورد» است را سبک می کند. شما می توانید همین کار را برای ارزش های کلاس انجام دهید.

      div.billboard ul {background-color: #ccc؛ }

      این فرض می کند که تقسیم یک مقدار کلاس "بیلبورد" است. CSS در بالا عنصر

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

      شما می توانید واقعا با سنگین و با صدای بلند با انتخاب فرزندان دریافت کنید. به عنوان مثال، اگر از Dreamweaver برای نوشتن کد HTML خود استفاده می کنید، هنگامی که قوانین جدید CSS را اضافه می کنید، تنظیم خودکار بر اساس مکان یابی مکان نما خود در آن صفحه تنظیم می شود. چه Dreamweaver در این موارد انجام می دهد، یک انتخابگر به طور جدی و طولانی از نسل بعدی ایجاد می کند. این ویژگی بسیار خاصی برای کار CSS شما لازم نیست. چیزی که میخواهید انجام دهید این است که تعادل بین انتخابگرهای فرزندتان را که به اندازه کافی مشخص است پیدا کنید تا بتوانید عناصر دقیقی را که نیاز دارید (بدون آنهایی که تمایل ندارید تأثیر بگذارید) تمرین کنید بدون داشتن قوانین CSS که دارای انتخابگرهایی هستند که بیش از حد هستند بزرگ