覆盖p标记的CSS规则失败

Question

这是我的标记

<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/

我做错了什么？

Answer 1

你的选择器错了，

使用：

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

Answer 2

你的选择器应该是：

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

您选择的所有<p>都是班级.note的后代。

jsFiddle.

Answer 3

您的选择器应该是：

.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/