Overriding parent's CSS display property

Question

I understand how to override parent styles, and I know this example is contrived, but is there a way (with inline CSS) to cause the child span to show, even though its parent is set to no display?

<span style="display:none">
<span style="display:block;">Test</span>
</span>

Answer 1

No, you cannot override the effect of display: none on inner elements. The reason is that the CSS specification explicitly says, in the description of value none for the display property:

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Answer 2

Short answer: No.

Long answer: There is no way to override display in children if the parent is hidden. You could use JavaScript to remove the child span from its parent, and place it in the body where you can apply a display style. Things like display, opacity, visibility etc, effect the children of elements they are applied to, the effects can't be completely countered, but for things like opacity they can be added to.