Gagal mengganti aturan CSS untuk tag p

Inilah markup yang saya miliki

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

Aturan CSS yang dimiliki salah satu stylesheet saya adalah ini:

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

Saya memerlukan aturan gaya ini untuk ditimpa untuk tag p yang memiliki kelas catatan bersamanya.

JADI saya menerapkan aturan gaya ini

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

Namun, aturan gaya asli tetap bertahan dan tidak dikesampingkan oleh aturan gaya baru yang telah saya terapkan.

Ini dia di js fiddle: http://jsfiddle.net/fNepf/

Apa yang saya lakukan salah?


css css-selectors
person Parijat Kalia    schedule 14.06.2013    source sumber
comment
Pastikan Anda juga menutup tag formulir dan kumpulan bidang dengan benar: jsfiddle.net/panchroma/sbG6g   -  person David Taiaroa    schedule 15.06.2013

Jawaban (3)


arrow_upward
1
arrow_downward

Pemilih Anda harus:

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

Anda memilih semua <p> yang merupakan turunan dari kelas .note.

jsFiddle.

person dsgriffin    schedule 14.06.2013
comment
mengerti, bagaimana jika tag p ini memiliki dua kelas, bukan satu - person Parijat Kalia; 15.06.2013
comment
Anda dapat melakukan p.note.test jika Anda memiliki dua kelas di <p> - person Jason Yaraghi; 15.06.2013
comment
@Adrift Kamu terlalu cepat :P - person dsgriffin; 15.06.2013
comment
OP: Anda tidak perlu mengubah apa pun jika elemen ini memiliki 25 kelas dan Anda hanya tertarik pada kelas .note. Meskipun jika Anda hanya ingin memilih paragraf yang memiliki kelas catatan dan tes, maka ya p.test.note adalah yang Anda cari. Catatan: Anda tidak perlu menambahkan elemen p ke pemilih Anda jika tidak ada elemen lain yang dapat memiliki kelas ini di dalam .sign-in. Pemilih kelas lebih spesifik daripada pemilih elemen sehingga ia mengesampingkan p dalam semua kasus - person FelipeAls; 15.06.2013
comment
@FelipeAls Saya sudah tahu semua itu, hanya bermain aman :) - person dsgriffin; 15.06.2013
comment
Saya buruk, lupa memulai komentar saya dengan OP: - person FelipeAls; 15.06.2013

arrow_upward
2
arrow_downward

Pemilih Anda salah,

menggunakan:

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

arrow_upward
1
arrow_downward

Pemilih Anda seharusnya:

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

Karena pemilih yang Anda posting sedang mencari <p> yang merupakan turunan dari elemen dengan kelas .note alih-alih elemen <p> dengan kelas .note

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

Jika Anda memiliki dua kelas di <p> Anda dapat menggunakan .sign-in p.note.test {}:

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

person Jason Yaraghi    schedule 14.06.2013