مفهوم علامت های + ~ < در CSS

CSS

توسط hamid67 در 5 سال پیش
0 2.1k 1 5 سال پیش
hamid67reza-irdev
0

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

آخرین ویرایش: 04-01-2018 ساعت 11:20، توسط Reza
0

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

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

علامت +

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

<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>

خروجی:

**First

**Second

**Third

***First

***Second

***Third

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

**Second

**Third

[color=#FF0000]First[/color]

Second

Third

علامت <

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

<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>

خروجی:

[COLOR="#FF0000"]**First

**Second

**Third[/COLOR]

***First

***Second

***Third

[COLOR="#FF0000"]**First

**Second

**Third[/COLOR]

First

Second

Third

علامت ~

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

<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>

خروجی:

**First

**Second

**Third

***First

***Second

***Third

[COLOR="#FF0000"]**First

**Second

**Third

First

Second

Third[/COLOR]

CSS Reference

آخرین ویرایش: 04-01-2018 ساعت 11:21، توسط Reza

خوش آمدید

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

لطفا ابتدا لاگین کنید