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

CSS

توسط hamid67 در 7 سال پیش
0 200.7k 1 7 سال پیش
hamid67 reza
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

خوش آمدید

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