Question

我正在开发一个项目，并且我使用纯HTML和CSS创建了一个页面。我希望页面能够响应，所以我使用了3种不同的样式表。一个宽度超过2000px，一个宽度从901px到1999px，一个宽度低于900px。我希望在宽度为900px或更小时隐藏2000px和1999px样式表中的某些元素，但它们包含一些我不想隐藏的嵌套元素。

<div class=”parent-element”>
     <div class=”nested-element”>
     </div>
</div>

我使用了以下CSS来隐藏“父元素”类，但它也隐藏了“嵌套元素”

.parent-element {
   display: none;
}

如何在没有显示“parent-element”类的情况下返回“嵌套元素”类？

我已经使用过这段代码而且无法使用

.nested-element {
   display: block;
}

此外，900px样式表继承了其他两个样式表的所有样式，如何防止它？

Answer 1

您无法隐藏父元素并显示嵌套元素。

你可以some tricks to deal with it，但就是这样。

Answer 2

就像Alvaro说你无法隐藏父母并展示嵌套。你必须修改你的html，就像这样

<div class=”block-element”>
     <div class=”parent-element”></div>
     <div class=”nested-element”></div>
</div>

Answer 3

.nested-element是.parent-element的孩子。如果将父项设置为不显示，则其中包含的任何内容也将不会显示。解决此问题的方法是更改HTML，以便.nested-element不再是.parent-element的孩子：

<div class="parent-element">
</div>
<div class="nested-element">
</div>

Answer 4

如果未显示元素，则无法显示其后代。这与继承无关。

您可以将父级设置为visibility: hidden，将其设置为visibility: visible，但这会导致父级占用空间。

重构HTML或在display: none的兄弟上设置.nested-element而非其父级可能是更好的方法。

如何覆盖样式并防止CSS中的继承？

4 个答案: