ตัวเลือก CSS“>” (เครื่องหมายมากกว่า) หมายถึงอะไร

475

ตัวอย่างเช่น:

div > p.some_class {
  /* Some declarations */
}

สิ่งที่ว่าไม่>หมายถึงเครื่องหมาย?

css css-selectors

— Misha Moroshko
แหล่งที่มา

672

>เป็นcombinator เด็กบางครั้งเรียกว่า combinator ลูกหลานโดยตรงโดยไม่ตั้งใจ ¹

ซึ่งหมายความว่าตัวเลือกdiv > p.some_classเพียงเลือกย่อหน้า.some_classที่ซ้อนกันโดยตรงภายในdivและไม่ย่อหน้าใด ๆ ที่ซ้อนกันภายในอีก

ภาพประกอบ:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

สิ่งที่เลือกและสิ่งที่ไม่:

เลือก
นี้p.some_classตั้งอยู่ภายในโดยตรงdivดังนั้นจึงมีการสร้างความสัมพันธ์ระหว่างผู้ปกครองกับองค์ประกอบ
ไม่ได้เลือก
สิ่งนี้p.some_classมีอยู่blockquoteภายในภายในdiv, แทนที่จะเป็นของdivตัวเอง แม้ว่านี่p.some_classจะเป็นลูกหลานของdivมันไม่ใช่เด็ก มันเป็นหลาน

ดังนั้นแม้ว่าdiv > p.some_classจะไม่ตรงกับองค์ประกอบนี้div p.some_classจะใช้combinator ลูกหลานแทน

¹ _{หลายคนไปไกลกว่าจะเรียกมันว่า "ลูกโดยตรง" หรือ "ลูกทันที" แต่มันไม่จำเป็นเลย (และทำให้ฉันรำคาญอย่างเหลือเชื่อ) เพราะองค์ประกอบลูกเป็นคำนิยามในทันทีดังนั้นพวกเขาจึงหมายถึงสิ่งเดียวกัน ไม่มีสิ่งเช่น "เด็กทางอ้อม"}

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

2

+1 มันเรียกว่าตัวเลือกเด็กหรือไม่? ถ้าเป็นเช่นนั้นนั่นเป็นสิ่งที่ทำให้เข้าใจผิด ฉันคิดว่า#something aจะเป็นตัวเลือกเด็ก

— alex

2

@alex: ใช่ :) #something aอาจหมายความว่าaเป็นหลานหรือยิ่งใหญ่ของ ^ n หลาน#something(ไม่คำนึงถึงความลึกของการทำรัง)

— BoltClock

12

@alex เรียกว่าcombinator สำหรับเด็กช่องว่างนั้นเรียกว่าcombinator ที่สืบทอดมา

— robertc

33

เมื่อใครบางคนเป็นลูกของปู่ย่าตายายเรากำลังเผชิญกับการร่วมประเวณีระหว่างพี่น้องที่น่ารังเกียจ มีความสุขที่เป็นไปไม่ได้ใน HTML

— เควนติน

8

ฉันไม่ได้ยินคนธรรมดาเรียกเด็ก ๆ ว่าลูกโดยตรงของพวกเขาเพื่อความชัดเจน

— BoltClock

41

> (เครื่องหมายมากกว่า) เป็น CSS Combinator

คอมบิเนเตอร์เป็นสิ่งที่อธิบายความสัมพันธ์ระหว่างตัวเลือก

ตัวเลือก CSS สามารถมีตัวเลือกง่าย ๆ ได้มากกว่าหนึ่งตัว ระหว่างตัวเลือกอย่างง่ายเราสามารถรวม combinator

มีสี่ combinators ที่แตกต่างกันใน CSS3:

ตัวเลือกผู้สืบทอด (พื้นที่)
ตัวเลือกลูก (>)
ตัวเลือกพี่น้องที่อยู่ติดกัน (+)
ตัวเลือกพี่น้องทั่วไป (~)

หมายเหตุ: <ไม่ถูกต้องในตัวเลือก CSS

ตัวอย่างเช่น:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

เอาท์พุท:

ข้อมูลเพิ่มเติมเกี่ยวกับ CSS Combinators

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

developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

— Lalit Yadav

@premraj ขอบคุณสำหรับคำอธิบายที่ยอดเยี่ยมเกี่ยวกับตัวเลือก CSS-parent!

— YCode

เมื่อคุณได้รับสิ่ง.entry-content > * {"code" }ที่ตามมาหมายความว่า.entry-content {"other code" }อะไร ไม่.entry-content > *ครอบคลุมเด็กทุกคนentry-contentใช่หรือไม่

— YCode

14

อย่างที่คนอื่นพูดถึงมันเป็นตัวเลือกลูก นี่คือลิงค์ที่เหมาะสม

http://www.w3.org/TR/CSS2/selector.html#child-selectors

— Dagg Nabbit
แหล่งที่มา

ขอบคุณมากสำหรับลิงค์! ฉันยังค้นพบ "ตัวเลือกพี่น้องที่อยู่ติดกัน" ที่นั่น

— Misha Moroshko

คุณจะพบการสนับสนุนเบราว์เซอร์ใน Sitepoint ไม่ทำงานใน IE6 หากเป็นเรื่องสำคัญสำหรับโครงการของคุณตกลงที่อื่น ทรัพยากรนี้เป็น esp มีประโยชน์สำหรับพี่น้อง,: nth-child () ฯลฯ ซึ่งการสนับสนุนยังไม่สมบูรณ์

— FelipeAls

10

มันตรงกับpองค์ประกอบที่มีระดับsome_classที่มีโดยตรงdivภายใต้

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

5

pแท็กทั้งหมดที่มีคลาสsome_classซึ่งเป็นชายด์โดยตรงของdivแท็ก

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

4

HTML

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

CSS

div > p.some_class{
    color:red;
}

เด็กทุกคนที่อยู่<p>ด้วย.some_classจะได้รับการนำไปใช้กับพวกเขา

— ราจราวัต
แหล่งที่มา

3

(ตัวเลือกลูก) ได้รับการแนะนำใน css2 div p {} เลือกองค์ประกอบ p ทั้งหมดที่ decedent ขององค์ประกอบ div ในขณะที่ div> p เลือกเฉพาะองค์ประกอบลูก p ไม่ใช่เด็กที่ยิ่งใหญ่และเด็กที่ยิ่งใหญ่เป็นต้น

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS Ce [ผู้ใช้งานและการใช้งานตรวจสอบบล็อกของฉัน css selectorsและcss3 selectors

— Avinash Malhotra
แหล่งที่มา

0

เครื่องหมายยิ่งใหญ่ (>) ตัวเลือกใน CSS หมายความว่าตัวเลือกทางด้านขวาเป็นผู้สืบทอด / ลูกโดยตรงของสิ่งที่อยู่ทางซ้าย

ตัวอย่าง:

article > p { }

หมายถึงสไตล์ย่อหน้าที่มาหลังจากบทความเท่านั้น

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