: ลูกคนแรกไม่ทำงานตามที่คาดไว้

100

ฉันพยายามที่จะเลือกเป็นครั้งแรกh1ภายในกับชั้นที่เรียกว่าdiv detail_containerใช้งานได้หากh1เป็นองค์ประกอบแรกภายในนี้divแต่ถ้ามาหลังจากนี้ulจะใช้ไม่ได้

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

ฉันรู้สึกว่า CSS ที่ฉันมีจะเลือกเป็นอันดับแรกh1ไม่ว่าจะอยู่ที่divใดก็ตาม ฉันจะทำให้มันทำงานได้อย่างไร?

css css-selectors

— มัฟฟินแมน
แหล่งที่มา

1

ไม่ว่า CSS จะทำอะไร JavaScript ก็ทำได้

— JCOC611

11

นี่คือสิ่งที่คุณสามารถทำได้ด้วย CSS3 แม้ว่า :)

— BoltClock

223

h1:first-childเลือกวิธีการ

เลือกลูกคนแรกของพาเรนต์
ถ้าเป็นh1องค์ประกอบเท่านั้น

:first-childของภาชนะที่นี่และเป็นกระป๋องดังกล่าวไม่ตอบสนองulh1:first-child

มี CSS3 :first-of-typeสำหรับกรณีของคุณ:

.detail_container h1:first-of-type
{
    color: blue;
}

แต่ด้วยความเข้ากันได้ของเบราว์เซอร์และอะไรก็ตามคุณจะดีกว่าที่จะให้h1คลาสแรกจากนั้นกำหนดเป้าหมายคลาสนั้น:

.detail_container h1.first
{
    color: blue;
}

— กลอนนาฬิกา
แหล่งที่มา

2

ตอนนี้ฉันเข้าใจแล้วแม้ว่าฉันคิดว่าควรใช้ทั้งสองเวอร์ชันเมื่อสร้างมาตรฐาน

— The Muffin Man

ไม่ทำงานในรุ่น IE9 มันบอกว่า h1: ไม่ทราบในเครื่องมือสำหรับนักพัฒนา

— Cine

11

รายการความเข้ากันได้ของ:first-of-typeตัวเลือก

— Jess Telford

4

ใหม่กว่ารายการความเข้ากันได้ของ:first-of-type. ลิงก์เก่าไม่ถูกต้อง

— BadHorsie

ในมุมมองของฉันคำ:first-childนี้ไม่ชัดเจนในการทำความเข้าใจเนื่องจากคุณกำหนดรายการเป็นตัวเลือก CSS พูดh1แล้วคุณคิดว่า "รับลูกคนแรก" ของทั้งหมดในระดับ DOM ที่เลือก ฉันใช้มันผิดหลายครั้ง ... เราต้องคุ้นเคยกับ:first-of-typeตัวเลือกและนึกถึงลูกคนแรกของประเภทนี้

— Kai Noack

15

:first-childเลือกรายการแรกh1 และต่อเมื่อเป็นลูกคนแรกขององค์ประกอบหลัก ในตัวอย่างของคุณulคือลูกคนแรกของdiv.

ชื่อของคลาสหลอกค่อนข้างทำให้เข้าใจผิด แต่อธิบายไว้ค่อนข้างชัดเจนที่นี่ในข้อมูลจำเพาะ

:firstตัวเลือกของ jQuery ให้สิ่งที่คุณกำลังมองหา คุณสามารถทำได้:

$('.detail_container h1:first').css("color", "blue");

— Rob Sobers
แหล่งที่มา

สิทธิ์ของคุณมันทำให้เข้าใจผิดฉันสับสนเป็นหลักเพราะฉันเคยใช้ jQuery เพื่อทำสิ่งนี้มาก่อน

— The Muffin Man

9

สำหรับกรณีนั้นคุณสามารถใช้:

.detail_container > ul + h1{ 
    color: blue; 
}

แต่ถ้าคุณต้องการตัวเลือกเดียวกันในหลาย ๆ กรณีคุณควรมีคลาสสำหรับสิ่งเหล่านั้นเช่น BoltClock กล่าว

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

คุณไม่ควรมีปัญหาใด ๆ ที่นี่อ้างอิงw3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

คุณยังสามารถใช้

.detail_container h1:nth-of-type(1)

โดยการเปลี่ยนหมายเลข 1 ด้วยหมายเลขอื่นคุณสามารถเลือกรายการ h1 อื่น ๆ ได้

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

1

คุณสามารถห่อของคุณh1แท็กอีกแล้วหนึ่งครั้งแรกจะเป็นdiv first-childที่divไม่จำเป็นต้องมีรูปแบบ เป็นเพียงวิธีการคัดแยกเด็กเหล่านั้น

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

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

0

องค์ประกอบไม่สามารถสืบทอดโดยตรงจาก<body>แท็ก คุณสามารถลองใส่ใน<dir style="padding-left:0px;"></dir>แท็ก

— Edmond Chow
แหล่งที่มา