در خصوص selectorهای global

[davood59]

سلام دوستان؛
چه تفاوتی بین کد نخست و کد دوم هستش:
1- برای تعیین رنگ متن قرمز برای تمامی تگهای درون تگ p:


p *
{
color:red;
}


2- در صورتی که میشه کد فوق رو به صورت زیر نوشت که درست هم کار می کنه:


p
{
color:red;
}

در صورتی که کد نخست درست کار نمیکنه و به تگهای درون تگ P اعمال نمیشه!!!
امکانش هست توضیح بدید؟

[cyrusthegreat]

دوست عزیز

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

نکته بعدی هم این بود که اگر داخل p یه div داشتیم رنگ اون هم تغییر نمی کنه. ولی اگه Span داشتیم تغییر می کرد. یعنی اینکه به نظر می رسه روی عناصر block تاثیری نداره و فقط عناصر inline رو انتخاب می کنه.

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

به نظر من، یه منطق پشت اینگونه رفتار هست، که البته فعلا ناشناخته هست. باید یکم باهاش ور رفت تا منطقش رو فهمید.

[davood59]

ممنونم ازتون؛
یعنی شما هم با من موافقید یا نه؟ تونستم منظورمو درست انتقال بدم؟
میدونید تو مقاله دقیقا اینجور نوشته بود:
" برای تعیین رنگ قرمز برای تمامی تگ های درون تگ p":

p *
{
color:red;
}


در صورتی که این کد درست کار نمی کرد و میخواست مثل مورد دوم بنویسیم.
میخوام ببینم آیا من اشتباه دارم برداشت میکنم و کدهارو اعمال، یا اینکه مقاله اشتباه نوشته؟

[cyrusthegreat]

دوست عزیز

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

[hightech]

علامت * برای استایلهایی بکار میره که بخواید برای مرورگرهای ie7 به پایین و ie8 compatible mode نمایش داده بشه
سایر مرورگرها و ie8 به بالا دیگه هیچکدوم این رو پشتیبانی نمیکنن

[cyrusthegreat]

دوست عزیز

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

http://kimblim.dk/css-tests/selectors/
http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/
https://developer.mozilla.org/en/Mozilla_CSS_support_chart
http://www.opera.com/docs/specs/presto26/css/selectors/
http://www.w3schools.com/cssref/sel_all.asp


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

با تشکر

[clover]

در صورتی که میشه کد فوق رو به صورت زیر نوشت که درست هم کار می کنه
علت این هست که خاصیت color از المنت های بالایی به ارث برده میشه، در واقع شما برای اینکه بهتر درک کنید که تفاوت این دستور ها در چی هست بهتره بر روی خاصیتی مثل border امتحان کنید:

p
{
border: 1px solid red;
}

و


p *
{
border: 1px solid red;
}


نمی تونم بطور قطع بگم که کدوم درست هست. چون منطقی که مرورگر های وب، برای برخورد با این مورد دارند رو هنوز نفهمیدم ولی مطمئنا یک منطقی وجود د اره که بین این دوتا تفاوت هست و نمی شه گفت اشتباهی داره عمل می کنم. چون هنوز درستش رو نمی دونیم :دی
هر دو دستور درست هستند، دستور اول به تگ p اعمال نمیشه و فقط به تگ های درون p اعمال میشه، دستور دوم فقط به تگ p اعمال میشه و بر روی تگ های داخلی تاثیری نداره، color خاصیتی هست که ارث برده میشه و به خاطر همین در هر دو حالت تگ های درونی رفتار مشابه دارند.

در صورتی که کد نخست درست کار نمیکنه و به تگهای درون تگ P اعمال نمیشه!!!
تست کردم، همونطوری که باید کار میکنه

اما برای اطلاعات بیشتر به این دو تا لینک مراجعه کنید:
http://www.w3.org/TR/CSS2/about.html#property-defs
http://www.w3.org/TR/CSS2/propidx.html

در لینک دوم لیست خصوصیات به همراه اینکه به صورت پیشفرض قابلیت ارث بری دارند یا نه آورده شده

[cyrusthegreat]

خب من تحقیقاتم رو انجام دادم :دی

می دونی مشکل چیه؟ مشکل اینه که از اساس این سوال غلطه. تگ p یعنی پاراگراف. خب داخل یه پاراگراف که نمی شه یه پاراگراف دیگه داشته باشی یا حتی یه div. باز هم بر میگرده به نوع رفتار مرورگر. مرورگر وقتی به یه p تو در تو و یا یه div درون p میرسه، اون p رو می بنده. بخاطر همین هیچوقت یه p یا div داخل یه p قرار نمی گیرن که بخواد رنگشون عوض بشه. همیشه قبلشون p بسته می شه. ولی span چون یه تگ داخلی هست پس، رنگش عوض می شه. (http://jsfiddle.net/pLmeF/)

حتی این کد (http://jsfiddle.net/JyHAG/) هم بدلیل بسته شدن p قبلش بدلیل وجود یه div بالاش رنگش عوض نمی شه.

اینجا (http://www.w3.org/TR/html401/struct/text.html#h-9.3.1) تو خود w3c گفته p نمی تونه شامل عناصر block مثل خود p باشه.

ولی اگر کدت به این تبدیل بشه هیچ مشکلی وجود نداره:

div *
{
border: 1px solid red;
}


چون div می تونه تو در تو باشه. توش عنصر inline بزاری، block بزاری. هر بلایی بخوای سرش بیاری می شه.

امیدوارم که فهمیده باشی. اگر مشکلی بود بگو بیشتر جواب بدم.

[hightech]

خواشمندم دوست عزیز، در مورد نکته ای که اطمینان و اشراف کامل در مورد اون ندارید، پست نزارید. چون این پست شما، در آینده ممکن است باعث گمراهی یکی از تازه کاران راه طراحی وب بشه.
كاش اینقدر با اطمینان تهمت نمیزدید
جهت اطلاع شما بگم که به این استفاده از علامت ستاره در css ميگن Star Selector Hack
لینکهای زیر رو بخونید، شاید من اشتباه میکنم:
http://reference.sitepoint.com/css/workaroundsfilters#workaroundsfilters__sect_starht mlselector
http://en.wikipedia.org/wiki/CSS_filter#Star_hack

[cyrusthegreat]

دوست عزیز

من اطمینان دارم که یک چیزی رو می گم. لینک هارو ببینید. تو تمومشون گفتن پشتیبانی می شه. در مورد تهمت هم، من هرگز به خودم اجازه نمی دم به شما یا هرکس دیگه ای جسارت کنم. اگر سوء تفاهم و یا دلخوری پیش اومده، من از شما معذرت می خوام.

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

div {
border: 1px solid #555;
*border: 20px dashed #f00;
}

تو تمامی مرورگر ها بجز نسخه 7 اینترنت اکسپلورر، border برابر 1px solid #555 می شه و فقط در ie 7 هستش که border، برابر 20px dashed #f00 می شه.

یه هک دیگه هم هست که اینجوریه:
مربوط به نوع رفتار نامناسب ie 4 تا 6 با سلکتور * می شه. برای اینکه در اون مرورگر ها درست کار کنه باید از هکش استفاده کرد. که هکش هم اینه:

* html body{
}

وگرنه سلکتور * یکی از سلکتور های خود CSS 2 هست.شما لینکهایی که دادم رو ببینید. تو تمام مرورگر ها پشتیبانی می شه.

[davood59]

دوستان عزیز از همتون ممنونم.
راستش همه پستها رو نخوندم و الان میخوام بخونم تا ببینم می فهمم یا نه! گفتم قبلش تشکر خودم رو کرده باشم.
ولی اینکه نوشتید:

مشکل اینه که از اساس این سوال غلطهیعنی سوالم رو درست مطرح نکردم یا ...؟:اشتباه:

[cyrusthegreat]

دوست عزیز

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

[cyrusthegreat]

البته یه نکته ای هم بگم که هم برای دنیا خوبه و هم آخرت. نسخه XHTML 2 از المنت block در یک تگ p پشتیبانی می کنه.

[hightech]

باید به اشتباهم اعتراف کنم
معذرت معذرت معذرت:ناراحت:

[cyrusthegreat]

hightech عزیز

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