در خصوص ارث بری و نحوه درست نوشتن سلکتورها امکانش هست کمکم کنید؟؟

[davood59]

سلام دوستان؛
چند روزی میشه که در خصوص نحوه درست نوشتن سلکتورها به خصوص وقت ارث بری شون هم گیج شدم و هم اینکه میخوام اگه منبعی هست بهم بگید تا بیشتر کار کنم.
برای مثال این تکه کد رو ببینید:
.icon{
background:url(../../Plugins/images/1.jpg) no-repeat;
}
.icon.adambarfi{
width:70px;
height:70px;
background-position:0 0;
}
.adambarfi:hover{
width:70px;
height:70px;
background-position:0 -70px;
background-color:#000;
}
اینهم کد Html من :


<div id="main">
<ul>

<li class="icon adambarfi"></li>
<li class="icon mah">afd</li>
</ul>
</div>

الان علت اینکه گیج شدم اینجاست که ببینید:
الف)
منظور این خط این هستش که هر خصوصیاتی رو که icon داره به کلاس آدم برفی هم اعمال کن؛ درسته؟؟


.icon.adambarfi{
width:70px;
height:70px;
background-position:0 0;
}

و تو html هم که خب دیدیم، اینجوری نوشتیم دیگه:



<li class="icon adambarfi"></li>


اگه پاسختون مثبت هستش، پس چرا حتی اگه تو تکه کد css اینجوری هم بنویسیم باز هم جواب میده:


.adambarfi{
width:70px;
height:70px;
background-position:0 0;
}
ممنون میشم اگه یه خورده توضیح بیشتری بدین یا اینکه یه مثال یا مقاله ای که در این خصوص بیشتر نوشته باشه.

[[younes]]

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

[بهزاد علی محمدزاده]

.icon.adambarfi{ width:70px;
height:70px;
background-position:0 0;
}

سلام. در این کد نیازی به گذاشتن سکتور icon نبوده اما منظور در این روش اینه : در صورتی قطعه کد adambarfi اجرا میشه که حتما کلاس icon پشتش قرار گرفته باشه. این نحوه کد نویسی کاربردش توی این مثال مشخص نیست اما در جای خودش کاربردهای زیادی داره . فرض کنید ما یه فضای نام داریم به نام open و می خوایم از این نام برای هرجا که نیاز به باز شدنی هست مثل منو و ... استفاده کنیم. اما open در منو و open در فرضا یه لیست افتادنی dropdownlist با هم تفاوت دارند. اما استفاده از یه فضای نام به یکپارچگی کد ها کمک می کنه ( یا هر دلیل دیگه ایی مانند جلوگیری از تداخل نام با پلاگین ها و ... ) . در نتیجه این کد رو میشه اینجوری نوشت :


.navigation.open{ // navigation code .
}


.dropdownlost.open{
// dropdownlist code .
}

گرفتی چی شد ؟ دیگه open هر کدام مشخصه و با هم تداخل ندارند و open مربوط به navigation در صورتی اجرا میشه که این کلاس پشتش باشه.

کد آیکن هم یه اینصورت هست که تمام مشترکات در یه کلاس به نام icon هست که از تکرار کدها جلوگیری می کنه . در زمان استفاده هم تمام ویژگی ها از اون کلاس ارث برده میشه :


.icon{ // styles
}


.icon-adambarfi{}
.icon-havij{{}
.icon-kolah{}<i class="icon icon-adambarfi"></i>

[Omid Jackson]

به نمونه کدی که نوشتم نگاه کنین:
http://jsfiddle.net/Blend_Design/fetm0zp1/
یک دیو با کلاس adambarfi و icon داریم، یک دیو icon و یک دیو adambarfi
جالا کلاس های مختلفی نوشتم، دیو اول که دو کلاس داشت، icon و adambarfi از کلاس های زیر ارث بری میکنه، چون شامل همه ی موارد هست:
.icon {
width: 100px;
height: 100px;
background-color: #f0f;
}
.adambarfi {
width: 150px;
height: 150px;
background-color: #00f;
}
.icon.adambarfi {
width: 200px;
height: 200px;
}
.adambarfi.icon {
border: 2px solid black;
}
ولی دیو دوم که فقط کلاس icon رو داره فقط از کلاس icon ارث بری میکنه:
.icon {
width: 100px;
height: 100px;
background-color: #f0f;
}
دیو سوم که فقط کلاس adambarfi داره از کلاسی adambarfi ارث بری میکنه:
.adambarfi {
width: 150px;
height: 150px;
background-color: #00f;
}
کلاس های زیر برای مواقعی هستن که یک تگ شامل هر دو کلاس باشه، یعنی هم icon و هم adambarfi رو داشته باشن:

.icon.adambarfi {
width: 200px;
height: 200px;
}
.adambarfi.icon {
border: 2px solid black;
}
دقت کنین که اگر بینشون (بین کلاس های CSS) فاصله بیفته اولیش میشه تگ والد، بعدیش میشه تگ فرزندش یا فرزند فرزند یا ... (مثلا پسرش یا نوه اش یا نتیجه اش همینطور به آخر)
.icon .adambarfi {
width: 200px;
height: 200px;
}
این یعنی اونی که کلاس icon داره رو پیدا کن، اگر داخلش کلاس adambarfi هست به اون این استایل رو بده، چون احتمال داره یکی کلاس adambarfi داشته باشه ولی والدش icon نباشه برای همین اون از این کلاس ارث بری نمیکنه

[davood59]

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

[davood59]

امید جان مجددا ازت متشکرم.
فقط راستش رو بخوای چند ساعتی رو با کدهایی که نوشتی کار کردم تا قشنگ حالیم بشه! فقط چند مورد بود که اگه زحمتی نبود و وقت داشتین ممنون میشم جوابمو بدین.
الف) ببینید تو اینجا که نوشتین:

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


1
2
3
4
.icon .adambarfi {
width: 200px;
height: 200px;
}




خب الان در اینجا adambarfi بچه icon هستش دیگه!درسته؟پس الان تو این تکه کد:

<div class="icon adambarfi">icon adambarfi</div>

الف - 1) رابطه پدر فرزندی داره رعایت میشه یا نه ! این تکه کد منظورش اینه که هر چی تو کلاسهای adambarfi و icon هستش رو بگیر، با این شرط که icon والد adambarfi هستش.
الف - 2) من فکر کنم اگه بخوایم رابطه پدر فرزندی رعایت شه باید اینجوری می نوشتیم یا من دارم اشتباه می کنم؟



<div class="icon">
<div class="adambarfi">icon babaye adam barfi
</div>
</div>

الف -3 ) یا اینکه طبق نوشته شما منظور از این کد:




<div class="icon adambarfi">icon adambarfi</div>

یعنی تلفیقی از 2 کلاس فوق رو قبول و هر چی که تو کلاسهای adambarfi و icon هستش رو اعمال کن.

ب) تو این تکه کد:


.icon.adambarfi{
width:300px;
height:200px;
}

ب - 1 ) و با این کد html :



<div class="icon adambarfi">icon adambarfi</div>

این یعنی اینکه از کلاسهای icon و adambarfi هر چی که دارن رو بگیر ولی در صورت وجود مقادیر مشابه اولویتت با کلاسی باشه که دقیقا icon.adambarfi. باشه! درست میگم؟؟ یعنی در این مثال اگه مقادیر مشابهی تو کلاسهای icon و adambarfi وجود داشتن(که طبق مثال شما دارن، منظورم همون طول و ارتفاع هستن) شما بیا و طول 300 و ارتفاع 200 رو بگیر ! .
ج) و در این تکه کد css که زحمت نوشتن رو کشیدین:


.icon {
width: 100px;

height: 100px;
background-color: #f0f;
}
.adambarfi {
width: 150px;
height: 150px;
background-color: #00f;

}
.icon.adambarfi {

width: 200px;

height: 200px;

}

.adambarfi.icon {

border: 2px solid black;

}





و با این تکه کد Html :

<div class="icon adambarfi">icon adambarfi</div>


چرا adambarfi داره رنگ پس زمینه خودش رو اعمال میکنه و رنگ پس زمینه icon تاثیری نداره روی این تگ؟ من با خودم گفتم شاید چون adambarfi. بعد از icon. اومده حتما اینجوریه و کدهای موجود تو adambarfi غالب هستش بر icon ولی وقتی هم که اینجوری نوشتم بازم بی تاثیر بود و همچنان رنگ پس زمینه رو از adambarfi داره میگیره:
.adambarfi.icon{
width:300px;
height:200px;
}


<div class="adambarfi icon">adambarfi icon</div>

د) میشه بگیم وقتی که رابطه فرزند و والد برقرار نیست مثل این دو حالت زیر:

د - 1)
[CSS].adambarfi.icon{
width:300px;
height:200px;


و
د - 2)
.icon.adambarfi{
width:300px;
height:200px;
}

ترتیب نوشتن adambarfi و icon هم هیچ تاثیری در اجرای کد زیر ندارن؟؟


<div class="icon adambarfi">icon adambarfi</div>
<div class="adambarfi icon">adambarfi icon</div>

یا چرا فرق دارن با همدیگه؟؟؟؟

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

[Omid Jackson]

الف - 1) خیر، توی کد HTML شما دارین میگین هم کلاس icon و هم کلاس adambarfi رو داشته باش، ربطی با ریلیشن بین تگ ها نداره
الف - 2) بله این CSS در اینجا تاثیر گذار هست
الف - 3) هرچی که تو هر دو کلاس باشه رو میگیره

ب - 1) تا جایی که بنده اطلاع دارم و تجربه مقدار آخرین کلاس رو میگیره در صورتی که از important استفاده نشده باشه

ج) ببینین یک مثال فتوشاپی میزنیم، شما برای یک مربع رنگ قرمز پر میکنین مثلا کلاس آیکون، بعد میاین با رنگ سبز پرش میکنین، خب مسلما رنگ سبز که منظور آدم برفی هست رو میگیره

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