เลือกองค์ประกอบที่เกิดขึ้นก่อนหลังจากองค์ประกอบอื่น

114

ฉันมีโค้ด HTML ต่อไปนี้ในหน้า:

<h4>Some text</h4>
<p>
Some more text!
</p>

ในของ.cssฉันฉันมีตัวเลือกต่อไปนี้เพื่อจัดรูปแบบh4องค์ประกอบ โค้ด HTML ด้านบนเป็นเพียงส่วนเล็ก ๆ ของโค้ดทั้งหมด มีอีกหลายdivอย่างที่ห่อหุ้มไว้เป็นของ shadowbox:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

ดังนั้นฉันจึงมีสไตล์ที่ถูกต้องสำหรับh4องค์ประกอบของฉันแต่ฉันก็ต้องการจัดสไตล์pแท็กใน HTML ของฉันด้วย

เป็นไปได้ด้วย CSS-selectors หรือไม่? และถ้าใช่ฉันจะทำอย่างไร

html css css-selectors

— ปล้น
แหล่งที่มา

201

#many .more.selectors h4 + p { ... }

นี้เรียกว่าเลือกพี่น้องที่อยู่ติดกัน

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

1

อีกทางเลือกหนึ่งคือใช้ JS เพื่อค้นหาh4องค์ประกอบของคุณเดินไปที่พี่น้องคนถัดไปและเพิ่มคลาส CSS ลงไป ด้วย jQuery สิ่งนี้จะเป็นเพียง$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

โปรดทราบว่าสิ่งนี้ใช้ได้เฉพาะกับองค์ประกอบที่ตามหลังองค์ประกอบแรกทันที หากคุณต้องการมีเอลิเมนต์ html ตัวที่สองต่อไปคุณสามารถเชื่อมโยงมันได้ดังนี้ #selector .original + h4 + p เพื่อรับ p ตาม h4 ตามหลังอิลิเมนต์. original มีประโยชน์มาก

— user1610743

31

สำหรับตัวอย่างตามตัวอักษรของคุณคุณต้องการใช้ตัวเลือกที่อยู่ติดกัน (+)

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

อย่างไรก็ตามหากคุณต้องการเลือกย่อหน้าต่อเนื่องทั้งหมดคุณจะต้องใช้ตัวเลือกพี่น้องทั่วไป (~)

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

เป็นที่รู้จักกันจะเป็นรถใน IE 7+ น่าเสียดาย

— โจเอลเมลลอน
แหล่งที่มา

16

เพียงแค่กดปุ่มนี้เมื่อพยายามแก้ปัญหาประเภทนี้ด้วยตนเอง

ฉันเลือกตัวเลือกที่เกี่ยวข้องกับองค์ประกอบหลังจากเป็นสิ่งอื่นที่ไม่ใช่ p

.here .is.the #selector h4 + * {...}

หวังว่านี่จะช่วยทุกคนที่พบ :)

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

9

การใช้การ*จับคู่องค์ประกอบใด ๆ ตามที่อธิบายไว้ในชื่อเรื่อง เป็นคำเตือนที่เป็นประโยชน์สำหรับฉัน

— James EJ

1

นี่เป็นคำตอบเดียวที่เหมาะกับคำถาม คำตอบอื่น ๆ ต้องการความรู้ก่อนเกี่ยวกับประเภทขององค์ประกอบก่อนหน้า

— Hugo Wijdeveld

0

การหลอกลวงสำหรับผู้ขอทาน:

หากคุณต้องการเลือกองค์ประกอบทันทีหลังจากองค์ประกอบอื่นคุณใช้+ตัวเลือก

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

div + pองค์ประกอบ "+" จะเลือก<p>องค์ประกอบทั้งหมดที่วางไว้หลัง<div>องค์ประกอบ

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกให้ใช้ตารางนี้

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

0

ฉันใช้ CSS ล่าสุดและ "+" ไม่ได้ผลสำหรับฉันดังนั้นฉันจึงลงเอยด้วย

: ครั้งแรกที่เด็ก

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