父对象使用css影响普通选择器中的子样式

Question

我有以下标记：

<div id="content">
  <div id="contact">
    <p>Testing p selector in child</p>
  </div>
</div>

这两个css文件：

default.css [Parent]

#content p {
color: #000000;
font-size: 14px;
font-family: helvetica;
text-align: left;

}

form.css [Child]

#contact p {
background-color: #F2F7FB;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;       
color: #3670A7;   
text-align: left;       
margin-right: 0px;       
padding-right: 0px;

}

为什么：

<p>Testing p selector in child</p>

是获得父母的风格，而不是孩子的风格？

Answer 1

归功于BoltClock'saUnicorn，

来自评论的

：在form.css之后加载了default.css吗？

Answer 2

这可能是您的外部.css文件的加载顺序，但您可以通过在级联中使用“直接子”选择器来确保您的样式级联按照您的意愿应用而不管该顺序。

使用#contact > p和#content > p表示当p是具有ID的容器的直接子项时，它将使用该样式。