Here's the HTML code snippet I'm working with:
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p class="text-box">Hello</p>
</div>
</body>
</html>
This setup leads to output similar to this https://i.stack.imgur.com/qZeh6.png.
The second paragraph behaves as expected due to a lack of rule for font-weight on the paragraph element.
My question is whether it's possible to alter the CSS priority order to have the class styling from the third paragraph overridden by the container div's defined style, resulting in blue text?