html - How to prevent child element from inheriting CSS styles

Question

I have a <div> element with a <p> element inside:

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

How can I prevent my paragraph from inheriting the CSS properties set to the <div>?

score 1 · Accepted Answer

In your case the best way is to just over right the styles that the <p> element is inheriting:

So in your CSS file, which you should be using instead of inline styles:

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

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

score 0 · Accepted Answer

在您的子节点中 -

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

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

score 0 · Accepted Answer

您可以使用>CSS 中的选择器来p选择div.

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

3 回答 3