مفهوم علامت های +,<,~ در CSS
#1
Note 
سلام من جاهایی میبینم که از این علائم (+,<,~)در css استفاده میشه
میشه بگید معنی این علامت ها چیه؟

پاسخ
#2
Note 
سلام دوست عزیز
این علامت ها به بحث selector ها در CSS مربوط میشه.

با مثال برات توضیح میدم:

علامت +
به اولین المنت بعد پایان تگ المنت مشخص شده اشاره میکنه:

[HTML]<style>
div + p {
color:red;
}
</style>

<div id="rootDiv">
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
<div>
<p>***First</p>
<p>***Second</p>
<p>***Third</p>
</div>
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
</div>
<p>First</p>
<p>Second</p>
<p>Third</p>[/HTML]

خروجی:

کد:
**First

**Second

**Third

***First

***Second

***Third

[color=#FF0000]**First[/color]

**Second

**Third

[color=#FF0000]First[/color]

Second

Third

علامت <

فقط به children های level اول المنت مشخص شده اشاره میکنه:

[HTML]<style>
div#rootDiv > p {
color:red;
}
</style>

<div id="rootDiv">
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
<div>
<p>***First</p>
<p>***Second</p>
<p>***Third</p>
</div>
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
</div>
<p>First</p>
<p>Second</p>
<p>Third</p>[/HTML]

خروجی:

کد:
[COLOR="#FF0000"]**First

**Second

**Third[/COLOR]

***First

***Second

***Third

[COLOR="#FF0000"]**First

**Second

**Third[/COLOR]

First

Second

Third

علامت ~

به تمام المنت های بعد پایان تگ المنت مشخص شده اشاره میکنه:

[HTML]<style>
div ~ p {
color:red;
}
</style>

<div id="rootDiv">
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
<div>
<p>***First</p>
<p>***Second</p>
<p>***Third</p>
</div>
<p>**First</p>
<p>**Second</p>
<p>**Third</p>
</div>
<p>First</p>
<p>Second</p>
<p>Third</p>[/HTML]

خروجی:

کد:
**First

**Second

**Third

***First

***Second

***Third

[COLOR="#FF0000"]**First

**Second

**Third

First

Second

Third[/COLOR]

CSS Reference

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان