อะไรคือความแตกต่างระหว่าง ">" และช่องว่างในตัวเลือก CSS

128

อะไรคือจุดที่ใช้ไวยากรณ์นี้

div.card > div.name

อะไรคือความแตกต่างระหว่างสิ่งนี้

div.card div.name

css css-selectors

— แรนดี้เมเยอร์
แหล่งที่มา

นอกเหนือจากคำถามนี้เนื่องจากฉันไม่ทราบถึงเรื่องนี้และสามารถใช้เพื่อแก้ปัญหาที่ฉันพบได้เบราว์เซอร์ใดบ้างที่รองรับตัวเลือกประเภทนี้

— Kyle

3

ได้รับการสนับสนุนในเบราว์เซอร์ปัจจุบันทั้งหมด IE ได้รับการสนับสนุนในเวอร์ชัน 7: msdn.microsoft.com/en-us/library/…

— Matti Virkkunen

214

A > B จะเลือกเฉพาะ B ที่นำลูกไปยัง A (นั่นคือไม่มีองค์ประกอบอื่น ๆ อยู่ระหว่างนั้น)

A B จะเลือก B ใด ๆ ที่อยู่ภายใน A แม้ว่าจะมีองค์ประกอบอื่น ๆ คั่นอยู่ก็ตาม

— มัทนีเวียร์คุเณ
แหล่งที่มา

11

>คือตัวเลือกลูก มันระบุเพียงองค์ประกอบทันทีเด็กและลูกหลานไม่ได้ใด ๆ (รวมทั้งลูกหลานของแกรนด์หลาน ฯลฯ ) >ในขณะที่ตัวอย่างที่สองโดยไม่ต้อง

IE 6 และต่ำกว่าไม่รองรับตัวเลือกลูก ตารางการทำงานร่วมกันที่ดีคือที่นี่

— Pekka
แหล่งที่มา

2

div.card > div.nameตรงกัน<div class='card'>....<div class='name'>xxx</div>...</div> แต่ไม่ตรงกัน<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name จับคู่ทั้งสองอย่าง

นั่นคือ>ตัวเลือกตรวจสอบให้แน่ใจว่าองค์ประกอบที่เลือกทางด้านขวาขององค์ประกอบ>นั้นเป็นลูกที่ไม่อยู่นิ่งขององค์ประกอบทางด้านซ้าย

ไวยากรณ์โดยไม่มี>การแข่งขันใด ๆ<div class='name'>ที่เป็นลูกหลาน (ไม่เพียง แต่เด็ก) <div class='card'>ของ

— René Nyffenegger
แหล่งที่มา

1

> เทียบกับอวกาศ

พิจารณาสองสถานการณ์div > span { }เทียบกับdiv span { }

ที่นี่ (ช่องว่าง) จะเลือก<span>องค์ประกอบทั้งหมดภายใน<div>องค์ประกอบแม้ว่าจะซ้อนอยู่ภายในองค์ประกอบมากกว่าหนึ่งองค์ประกอบก็ตาม >เลือกเด็กทุกคนของ<div>องค์ประกอบ แต่ถ้าพวกเขาจะไม่ได้อยู่ในองค์ประกอบอื่น

ดูสองตัวอย่าง:

> (มากกว่า):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

ขยายข้อมูลโค้ด

อันนี้เลือกแท็ก<span>Hello...</span>(เพราะอยู่หลังdivแท็กที่ซ้อนกันทันที) <span>World!</span>และจะไม่มองหาแท็ก<span>ด้านใน<p>เนื่องจากไม่ได้อยู่หลังdivแท็กทันที

ช่องว่าง

div span {
  color: #0A0 ;
}

<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

ขยายข้อมูลโค้ด

แท็กนี้จะเลือกแท็กช่วงทั้งหมดแม้ว่าจะซ้อนอยู่ในแท็กอื่นก็ตาม

— S.Goswami
แหล่งที่มา

0

A> B เลือก B ถ้าเป็นลูกโดยตรงของ A ในขณะที่ AB เลือก B ไม่ว่าจะเป็นลูกโดยตรงของ B หรือไม่ก็ตาม

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

ขยายข้อมูลโค้ด

— eozten
แหล่งที่มา

มีข้อมูลโค้ดอยู่ที่นี่ ฉันไม่รู้ว่าคุณจะเห็นมันไหม

— eozten

การสาธิตเป็นสิ่งที่ดี แต่เป็นเพียงการเสริมข้อมูลที่ตอบคำถามเท่านั้น ข้อมูลที่มีอยู่แล้วในอีกสามคำตอบ บางทีถ้าวันนี้ถามคำถามนี้อาจจะมีประโยชน์ แต่ถ้าคุณกำลังจะตอบคำถามที่มีอายุมากกว่า 8 ปีก็ควรจะเป็นเหตุผลที่น่าสนใจ

— TylerH