การเอาชนะกฎ CSS สำหรับแท็ก p ล้มเหลว

นี่คือมาร์กอัปที่ฉันมี

<div class="sign-in ">
<form> 
<fieldset>
<p class="note">
Note
</p>
</div>

กฎ CSS ที่หนึ่งในสไตล์ชีทของฉันมีคือ:

.sign-in p{
margin: 5px 80px;
}

ฉันต้องการให้กฎสไตล์นี้ถูกเขียนทับสำหรับแท็ก p ที่มีคลาสโน้ตอยู่ด้วย

ดังนั้นฉันจึงใช้กฎสไตล์นี้

.sign-in .note p{
margin:0px;
}.

อย่างไรก็ตาม กฎสไตล์ดั้งเดิมยังคงรักษาตัวเองไว้ แทนที่จะถูกแทนที่โดยกฎสไตล์ใหม่ที่ฉันนำไปใช้

นี่คือสิ่งนี้ใน js fiddle: http://jsfiddle.net/fNepf/

ผมทำอะไรผิดหรือเปล่า?


css css-selectors
person Parijat Kalia    schedule 14.06.2013    source แหล่งที่มา
comment
ตรวจสอบให้แน่ใจว่าคุณปิดฟอร์มและแท็ก fieldset อย่างถูกต้องเช่นกัน: jsfiddle.net/panchroma/sbG6g   -  person David Taiaroa    schedule 15.06.2013

คำตอบ (3)


arrow_upward
1
arrow_downward

ตัวเลือกของคุณควรเป็น:

.sign-in p.note {
   margin:0px;
}

คุณกำลังเลือก <p> ทั้งหมดซึ่งเป็นผู้สืบทอดของคลาส .note

jsFiddle

person dsgriffin    schedule 14.06.2013
comment
เข้าใจแล้ว ถ้าแท็ก p นี้มีสองคลาสแทนที่จะเป็นคลาสเดียว - person Parijat Kalia; 15.06.2013
comment
คุณสามารถทำ p.note.test ได้ถ้าคุณมีสองชั้นเรียนใน <p> - person Jason Yaraghi; 15.06.2013
comment
@Adrift คุณเร็วเกินไป: P - person dsgriffin; 15.06.2013
comment
OP: คุณไม่ต้องแก้ไขอะไรเลยหากองค์ประกอบนี้มี 25 คลาสและคุณสนใจเฉพาะคลาส .note เท่านั้น แม้ว่าคุณต้องการเพียงเลือกย่อหน้าที่มีทั้งคลาสโน้ตและคลาสทดสอบ ใช่แล้ว p.test.note คือสิ่งที่คุณกำลังมองหา หมายเหตุ: คุณไม่จำเป็นต้องเพิ่ม p องค์ประกอบลงในตัวเลือกของคุณ หากไม่มีองค์ประกอบอื่นที่อาจมีคลาสนี้อยู่ภายใน .sign-in ตัวเลือกคลาสมีความเฉพาะเจาะจงมากกว่าตัวเลือกองค์ประกอบดังนั้นจึงแทนที่ p ในทุกกรณี - person FelipeAls; 15.06.2013
comment
@FelipeAls ฉันรู้หมดแล้ว แค่เล่นอย่างปลอดภัย :) - person dsgriffin; 15.06.2013
comment
แย่ของฉันลืมเริ่มความคิดเห็นของฉันโดย OP: - person FelipeAls; 15.06.2013

arrow_upward
2
arrow_downward

ตัวเลือกของคุณผิด

ใช้:

.sign-in .note{
    margin:0px;
}
person Nick R    schedule 14.06.2013

arrow_upward
1
arrow_downward

ตัวเลือกของคุณควรเป็น:

.sign-in p.note {
margin: 0px;
}

เนื่องจากตัวเลือกที่คุณโพสต์กำลังมองหา <p> ที่เป็นลูกหลานขององค์ประกอบที่มีคลาส .note แทนที่จะเป็นองค์ประกอบ <p> ที่มี คลาส .note

http://jsfiddle.net/fNepf/2/

หากคุณมีสองคลาสบน <p> คุณสามารถใช้ .sign-in p.note.test {}:

http://jsfiddle.net/fNepf/3/

person Jason Yaraghi    schedule 14.06.2013