如何防止子元素继承CSS样式

Question

我有一个<div>元素，其中包含<p>元素：

<div style="font-size:10pt; color:red;">
    This is my Parent Div.
    <p>This is my Child Paragraph.</p>
    My parent Div Ends Here.
</div>

如何阻止我的段落继承设置为<div>？

的CSS属性

Answer 1

在您的情况下，最好的方法是恰好超越<p>元素继承的样式：

因此，在CSS文件中，您应该使用它而不是内联样式：

.parent-div {
    font-size: 10pt;
    color: red;
}

.child-paragraph {
    font-size: 12pt;
    color: black;
}

Answer 2

在您的子节点 -

<p style="font-size:12pt; color:black;">This is my child</p>

只需将内联样式设置为您想要的任何内容。

Answer 3

您可以使用CSS中的>选择器来选择p的直接子div。

Fiddle link

div > p {
    font-size:1.2 em;
    color: green;
}