cssطراحی سایت

جلسه ۲۳: ترکیب انتخابگرها در CSS

استراتژی های دقیق تر برای هدف قرار دادن عناصر HTML موارد زیر را بیان خواهیم کرد انتخاب چندین عنصر انتخاب عناصر تو در تو

انتخاب چندین عنصر

برای انتخاب چندین عنصر ، انتخابگرها را با کاما جدا کنید ، مانند این موارد:
/* Selecting multiple HTML element types */
h1, p {
  border: 1px solid black;
}

/* Selecting styles to be applied to several classes */
.ingredientsList, .instructionsList {
  font-size: 1.2em;
}

/* Using multiple kinds of selectors*/
h3, .red, #redElement{
  color: red;
}

انتخاب عناصر تو در تو

ما یک عنصر div داریم که شامل چندین عنصر HTML است:
<div>
  <h1>Selecting Nested Elements with CSS</h1>
  <p>We can specify to only style elements within this div.</p>
  <div>
    <p>Elements can have any level of nesting and still be selected correctly.</p>
  </div>
</div>
در این HTML ، یک div (عنصر والد) وجود دارد که دارای سه عنصر فرزند است. تقسیم تو در تو نیز دارای یک فرزند تنها است. به یاد داشته باشید که HTML یک ساختار درخت مانند ایجاد می کند:

برای انتخاب فقط فرزندان یک عنصر والدین خاص ، باید عنصر والدین و سپس عنصر کودک را نشان دهید ، در حالی که یک < در میان آنها قرار دارد.
/* select only for h1 elements within div's */
div > h1 {
border-bottom: 1px solid black;
}
این مکانیسم می تواند عناصر را با هر سطح تودرتو ، با اضافه کردن یک انتخابگر اضافی جدا شده توسط یک فاصله ، انتخاب کند.
<html>
 <head>
   <title>Selecting nested elements</title>
 </head>
 <body>
   <div>
     <h1>Selecting Nested Elements with CSS</h1>
     <p>We can specify to only style elements within this div.</p>
     <div>
       <p>Elements can have any level of nesting and still be selected correctly.</p>
     </div>
   </div>
   <h1>This element will not have a border.</h1>
 </body>
</html>
div > h1 {
  border-bottom: 1px solid black;
}

div > div > p {
  border-bottom: 1px solid black;
}
درک خود را بررسی کنید:
0
ایجاد شده در

Quiz 48

1 / 2

چگونه قوانین CSS را در یک قانون واحد بازنویسی می کنید؟

2 / 2

در کد بالا ، ما دو قانون CSS داریم. آیا می توان یک قانون واحد ایجاد کرد که به همان نتیجه برسد؟

امتیاز شما

میانگین امتیازها 0%

0%

اکنون که در مورد ترکیبات انتخابگر آموخته اید ، بیایید در درس بعدی با مدل CSS Box آشنا شویم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا