ไวยากรณ์สำหรับตัวเลือกใน CSS สำหรับองค์ประกอบต่อไปคืออะไร?

200

ถ้าฉันมีแท็กส่วนหัว <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

<p>stuff here</p>และหลังจากนั้นผมมีย่อหน้า

ฉันจะแน่ใจได้อย่างไรว่าใช้ CSS ที่ทุก<p>แท็กที่ตามh1.hc-reformมาใช้:clear:both;

จะเป็น:

h1.hc-reform > p{
     clear:both;
}

ด้วยเหตุผลบางอย่างที่ไม่ทำงาน

— โทนี่โนริก้า
แหล่งที่มา

397

สิ่งนี้เรียกว่าตัวเลือกพี่น้องที่อยู่ติดกันและจะถูกแสดงด้วยเครื่องหมายบวก ...

h1.hc-reform + p {
  clear:both;
}

หมายเหตุ: ไม่รองรับ IE6 หรือเก่ากว่า

— Josh Stodola
แหล่งที่มา

4

ว่าจะเลือกที่มาหลังจากp h1.hc-reformจากนั้นอีกครั้งมันอาจเป็นเพียงสิ่งเดียวที่clear: bothจำเป็นต้องนำมาใช้เพื่อให้มันทำงานได้เพราะมันเป็นการลบล้างการh1ลอยดังนั้นมันยังคงเป็นคำตอบที่ถูกต้อง

— BoltClock

@BoltClock ใช่คุณถูกต้องฉันอ่านข้อมูลจำเพาะผิดและลบความคิดเห็นนั้นเพราะมันผิด ตัวเลือกนี้จะตรงกับสิ่งpที่นำหน้าทันทีh1.hc-reform(แน่นอนด้วยองค์ประกอบหลักเดียวกัน)

— Josh Stodola

4

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

— ทฤษฎี

1

~ เป็นตัวเลือกที่ดีกว่าในกรณีนี้ ที่นี่การทำงาน JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

น่าสังเกตว่านี่จะไม่ทำงานหากองค์ประกอบแรกมีลูก ๆ

— 72GM

60

คุณสามารถใช้ตัวเลือกพี่น้อง ~ :

h1.hc-reform ~ p{
     clear:both;
}

สิ่งนี้เลือกpองค์ประกอบทั้งหมดที่ตามมา.hc-reformไม่ใช่เฉพาะองค์ประกอบแรก

— สเตฟานมุลเลอร์
แหล่งที่มา

ข้อผิดพลาด IE ในลิงค์แรกเป็นสิ่งคลุมเครือกรณีสิ่งซึ่งอาจเป็นเหตุผลที่ quirksmode มองเห็นพวกเขา

— ขวาน

14

ไม่ใช่>เป็นตัวเลือกลูก

สิ่งที่คุณต้องการคือ +

ดังนั้นลอง h1.hc-reform + p

การสนับสนุนเบราว์เซอร์ไม่ดี

— Moin Zaman
แหล่งที่มา

2020: การสนับสนุนเบราว์เซอร์นั้นยอดเยี่ยมหลังจากสิบปี เพียงแค่ข้อมูลสำหรับมือใหม่ CSS

— Alexio

8

>เป็นตัวเลือกเด็ก ดังนั้นหาก HTML ของคุณมีลักษณะดังนี้:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... แล้วนั่นคือตั๋วของคุณ

แต่ถ้า HTML ของคุณมีลักษณะดังนี้:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

จากนั้นคุณต้องการตัวเลือกที่อยู่ติดกัน :

h1.hc-reform + p{
     clear:both;
}

— Richard JP Le Guen
แหล่งที่มา

4

ฉันแน่ใจว่าเขาไม่ได้ซ้อน p ไว้ใน h1's .. และที่อยู่ติดกันก็เลือก p แรกเท่านั้น

— Stephan Muller

2

ไม่แน่นอน h1.hc-reform > pหมายถึง "ใด ๆpที่อยู่ภายใต้ว่าในระดับหนึ่งh1.hc-reform"

h1.hc-reform + pสิ่งที่คุณต้องการคือ แน่นอนว่าอาจทำให้เกิดปัญหาบางอย่างใน Internet Explorer เวอร์ชันเก่า หากคุณต้องการให้หน้าเข้ากันได้กับ IE ที่เก่ากว่าคุณจะติดกับการเพิ่มคลาสด้วยตนเองในย่อหน้าหรือใช้ JavaScript บางอย่าง (ใน jQuery เป็นต้นคุณสามารถทำอะไรบางอย่างได้$('h1.hc-reform').next('p').addClass('first-paragraph'))

ข้อมูลเพิ่มเติม: http://www.w3.org/TR/CSS2/selector.htmlหรือhttp://css-tricks.com/child-and-sibling-selectors/

— จัสตินรัสเซล
แหล่งที่มา