What is the logic behind sibling selectors * + * and * ~ *?

Question

For this question I\'m using the following markup:

    
1
 
         


        

Answer 1

That's an error in your test case. As you would expect, none of the selectors match the first paragraph, but the styling from the body cascades to the paragraphs!

Both * + * and * ~ * match body as it is preceded by a head tag. Thus, it receives text-decoration:underline and font-style:italic. That explains why all of the paragraphs are both underlined and italicised.