Ошибка переопределения правила 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: http://jsfiddle.net/fNepf/

Что я делаю не так?


css css-selectors
person Parijat Kalia    schedule 14.06.2013    source источник
comment
Убедитесь, что вы правильно закрываете теги формы и набора полей: 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
ОП: Вам не нужно ничего менять, если у этого элемента 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