Saber Mogaddas
پنج شنبه 12 مرداد 1391, 13:27 عصر
سلام
برای مثال کد html به این صورت نوشته شده :
<div id="Wraper">
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
</div>
و ما می خواهیم به li های موجود در ol دسترسی پیدا کنیم و رنگ اونارو تغییر بدیم (Descended) :
#Wraper ul li ol li
{
color:#909090;
}
ویا به صورت زیر (Child) :
#Wraper > ul > li > ol > li
{
color:#909090;
}
در همه موارد به صورت نزولی به سمت هدفی که باید select شه می رویم برای مثال یه کدی به صورت زیر هست :
<div class="Wraper">
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
</div>
<span class="Wraper">
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
</span>
همانطور که مشاهده می کنید هر دو تگ span و div به وسیله کلاس هم نام به دلایل گوناگون مشخص شده اند ولی هدف ما select آن li ای هست که در داخل ol و در داخل ul و در داخل تگ span با کلاس wraper هست :
span.Wraper > ul > li > ol > li
{
color:#909090;
}
برای select هدف در داخل دیو نیز :
div.Wraper ul li ol li
{
color:#909090;
}
در حالت کلی select کردن فرزند تگ به این صورت هست ..
اگه بخواهیم برای برای یک نسل از یک عنصر استایل تعریف کنیم از Descended Selectors که به وسیله خط فاصله تگ ها را از هم جدا می کنیم
اگه مقصود ما تعریف استایل برای یک فرزند باشد از Child Selectors که به وسیله < تگ ها را از هم جدا می کنید
ما selector دیگری نیز به اسم Adjacent Selectors در دستورات css داریم که با یک مثال مفهوم اون رو توضیح می دهیم :
h1+p {color:blue;}
این دستور اولین پاراگراف بعد از تگ h1 را به رنگ آبی تغییر می دهد و یا :
h1+p+p {color:blue;}
این دستور نیز دو پاراگراف بعد از تگ h1 را به رنگ آبی تغییر می دهد.
موفق باشید..