如何为父元素样式赋予比子元素样式属性更多的优先级？

Question

我想编辑HTML代码的外观，我对此一无所知。例如，我只是想让它的文字为青色。不管它的颜色如何。 我试过这个：

<p style="color:cyan !important;">
   <span style="color:red;">Hello World</span>
<p>

不要忘记这只是一个例子。我真的不知道什么会被span标签取代。想象一下这个PHP代码：

echo '<p style="color:cyan;">';
echo $HTML;// the HTML code that i want to appear in cyan
echo '</p>';

EDIT1： 我不能使用内部和/或外部CSS样式。

EDIT2： 或者给我一个PHP解决方案来从$ HTML中删除所有颜色属性。

Answer 1

请参阅此fiddle

关注CSS可以解决问题。但这是一个合适的解决方案吗？可能不是。

CSS：

p > * {
    color: cyan !important;
}

请参阅CSS Specificity了解详情。

Answer 2

这是一种内联风格。它具有最高优先级。

<p style="color: cyan">Hello World</p>

这是一种嵌入式风格。它具有第二高的优先级。

 <style type="text/css">
 p {color: cyan;}
 </style>

使用外部样式表（.css文件）是第三高优先级。

如果在p元素中使用span元素，并且两者都有内联样式，则span元素将具有更高的优先级。