css - 覆盖 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 fiddle 中的这个：http: //jsfiddle.net/fNepf/

我究竟做错了什么？

score 2 · Accepted Answer

2

你的选择器错了，

利用：

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

于 2013-06-14T22:04:31.457 回答

score 1 · Accepted Answer

您的选择器应该是：

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

您正在选择所有<p>属于该类的后代.note。

score 1 · Accepted Answer

您的选择器应该是：

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

由于您发布的选择器正在寻找一个<p>具有类的元素的后代，.note而不是具有类的<p>元素.note

如果您有两个课程，<p>您可以使用.sign-in p.note.test {}：

3 回答 3