I just wonder why the following page doesn't work properly. If I substitute p with a div or an a (anchor) (both for HTML part and for the single CSS definition), sibling selector ~ works properly. But if I use p or for instance h1, I can't get the expected outcome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Page</title>
<style>
p ~ h3{text-decoration:underline}
</style>
</head>
<body>
<p>here comes a paragraph
<h3>child of p, thus should not be underlined</h3>
</p>
<h3>has the same parent with p, thus should be underlined</h3>
</body>
</html>
Without a doubt, I am missing something I should be aware of, but I can't find the relevant information on anywhere. I appreciate if one of you can provide the essential info. Thank you!