• مفهوم علامت های +,<,~ در 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 مهمان