Why can't I override display property applied

2019-07-31 18:54发布

站内文章 / HTML/CSS

28 0

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to hide all the elements in some screen resolution and just show the wanted element to be visible:

For instance:

*{
    display: none;
}
#block{
    display: block !important;
}

But this won't override the display property anymore. demo

* targets all elements within the document, including html and body as well. That's why the content is still hidden - verify that.

If you want to select all elements within the <body> you should do that as follows:

body * {
    display: none;
}

#block {
    display: block;
}

<div id="block">block</div>

Because body and html are included in the universal selector *, which has the display: none; rule.

http://jsfiddle.net/nk8np9vo/6/

If you open the target frame with your favourite DOM inspector you'll see that <body> remains hidden:

标签： css css-selectors

够拽才男人

女 | 书童

私信

Ta的文章更多文章

0条评论

还没有人评论过~