tamafi6
سه شنبه 24 بهمن 1391, 20:45 عصر
گزینشگرهای خویشاوندی عناصررابراساس رابطه شان بادیگرعناصرداخل کدانتخاب میکنند
مثل
<div class="col">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
.col(ol li){
background: #ebebeb;
}
تمامی عناصرliبه عنوان فرزندونوه عنصرolراانتخاب میکنه حالااگه یکی ازاین liهادارای برچسب ulباشد وچندین liهم داخل اون باشه اونهاراهمانتخاب میکنه مثل
<div class="col">
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul></li>
</ol>
</div>
ویافرزندمستقیم که تمامی عناصر li رابه طورمستقیم فرزند ol محسوب میشوندراانتخاب میکنه وعناصردیگه ای که داخل برچسب li قرارگرفته اندرانادیده میگیره مثل
.col(ol>li){
background: #ebebeb;
}
این دستورتنها li هایی که به طورمستقیم درداخل برچسب ol قرارگرفته باشندراانتخاب میکنه اگرکدرامثل این مثال بنویسی
<div class="col">
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul></li>
</ol>
</div>
بادستورموردنظرهیچ کدام ار li هایی که داخل ul قرارگرفتن انتخاب نخواهندشد
مثال دیگه
.col(ol+li){
background: #ebebeb;
}
هستش این کدتمامی عناصر li راکه دارای والدیکسانی باعنصر ol هستندراانتخاب میکنه به شرطی که تمام این عناصر li بعدازعنصر ol درکدآماده باشه مثال
.col(li+li){
background: #ebebeb;
}
که تمامی li هاراانتخاب میکنه به جزاولین li
ویاگزینشگرهمزادمجاور
h1~h2{
background: #ebebeb;
}
این گزینشگرتمامی عناصرفرزندی کهh2 هست ووالدشون باوالد h1 راکه یکی هست مثل heder درپایین انتخاب میکنه
مثال
<section class="cols">
<heder>
<h1>سایه دارنمودن</h1>
<h2>strongسایه دارنمودن</h2>
</heder>
<p>strong</p>
<h2>سایه دارنمودن سایه دارنمودن</h2>
<p>strong</p>
</section>
که تمامی h2 هایی که بعداز h1 آمده باشدراانتخاب میکنه به شرطی که والدمستقیم هردوی عناصریکسان باشدبه همین خاطراگر h2 بعداز h1 آمده باشه ولی اگردریک برچسب دیگه قرارگرفته باشه توسط این گزینشگرانتخاب نمیشه مثل
heder(h1~h2){
background: #ebebeb;
}
این گزینشگراولین h2 توی این کدراانتخاب میکنه چون هردوی h1,h2 اینجادارای والدhederهستنددومین h2 انتخاب نمیشه چون که والداون برچسب section ویا cols هستش نهheder حالابادستور
.cols~h2{
background: #ebebeb;
}
میتونی این برچسب راهم انتخاب کنی ویا
h2~p{
background: #ebebeb;
}
که تنهاآخرین p انتخاب میشه واولین p قبل ازبرچسب h2 قرارگرفته انتخاب نمیشه چون section والداون هست
کدهای خویشاوند دیگه ای هم هست که به کاذب ساختاری مشهورندمثل
<div class="rw">
<span>HTML5&CSS3</span>
<span>ارایه برنامه های جالب</span>
<span>تاثیرگذاری بالا</span>
<span>شناورسازی طرح ها</span>
<span>ابزارباورنکردنی</span>
<span>هوشمندی کدها</span>
</div>
اگربخواهیم برای هرکدام ازعناصریک خصیصه تعریف کنیم مجبوریم ازکلاس داخل صفحه استفاده کنیم ویابه هرکدام یک مشخصه بدیم که استانداردنیست میایم ازروش زیراستفاده میکنیم
.rw span:nth-child(1) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}
.rw span:nth-child(2) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
}
.rw span:nth-child(3) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
animation-delay: 20s;
}
.rw span:nth-child(4) {
-webkit-animation-delay: 25s;
-moz-animation-delay: 25s;
animation-delay: 25s;
}
.rw span:nth-child(5) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
animation-delay: 30s;
}
.rw span:nth-child(6) {
-webkit-animation-delay: 35s;
-moz-animation-delay: 35s;
animation-delay: 35s;
}
که همه span های فرزندباشماره مشخص شدن از1 تا 6 که جداگانه میشه به هرکدام خصوصیات متفاوت خودش رادادوصفحه موردنظربانظم ترخواهدبودکه میتونی همین کدرادرنمونه لینک زیردرقسمت heder بالای صفحه ببینی بعداز10ثانیه
http://pacifist.site88.net/form/form.html
سرآدم گیج میره نه؟؟؟:گیج: