CSS 重置 div 中的所有样式，但允许较低的样式覆盖它

Question

我的主样式表也是如此，它为我的网站设置了所有样式。但我有一个作为菜单打开的 div。我需要它有自己的风格，但我不能拥有它，或者它继承了主样式表中的任何样式。但是在我重置样式之后，我将 div 设置为一个全新的元素。我找到了 all: initial;休息的元素。和#we_gallery_edit_window > * 之类的作品。但是当我尝试声明新样式时，某些新样式不会因为优先级而被采用。到目前为止，这是我的代码:

h1
{
    color: #000000;
    background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
    all: initial;
}
.my_div_child h1
{
   color: #F0F0F0;
}

<h1>Hello</h1>  //Should be black with background
<div id='my_div'>
    <h1 class='my_div_child'>Good bye</h1>  //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background

我需要一个选择器来覆盖它上面的所有内容，但不优先于它下面的任何内容。所以去掉主div中h1设置的样式，然后重新设置.my_div_child的h1。这不仅仅是我遇到问题的 h1 元素，但这是我能想到的最简单的示例。

Answer 1

好的，在看到更新后的帖子后，我想我明白了。

我认为您可能只是使用了错误的选择器。你可以review CSS selectors如果您不确定。

一方面，如果你想用 my_div_child 类来设置 h1 的样式，则规则为 h1.my_div_child，或者只需 .my_div_child，如果您没有其他具有该类名称的非 h1 元素。使用 .my_div_child h1 将在类为 my_div_child 的父容器内选择 h1 标签，这不是您的 HTML 显示的内容。

如果你想重置 #my_div 的子元素的样式，你可以像你一样使用带有通配符的 all: initial 选择器，而不是使用直接子选择器(>)，规则嵌套通配符即可:

#my_div * {
  all: initial;
}

如果使用直接子选择器，只有#my_div中的第一级子级会被重置，而#my_div的孙级不会，这是可能不是您想要的。

这些事情都搞定了，只需使用上面的语句来重置您的样式，然后根据需要开始为 #my_div 的内容设置样式，它应该可以工作，因为各种标签(例如 h1)将被比通配符更具体。请参阅下面的代码片段。

也就是说，您可能会发现通过使用特殊性来简单地覆盖某些不是您想要的样式比在 #my_div 中重置一切并重新开始更容易.很有可能菜单会与整个网站共享一些样式。例如:

h1 {
  font-style: italic;
}
#my_div h1 {
  font-style: normal;
}

如果这些方法不起作用，并且您仍然遇到样式不起作用的问题，那么您必须发布一些更具体的代码，以便我们找出问题所在。

重置示例:

html {
  background-color: coral;
  font-style: italic;
  font-family: sans-serif;
}
h1 {
  background-color: white;
}
#my_div * {
  all: initial;
}
#my_div .my_div_child {
  color: darkgray;
  font-size: 4em;
  /* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}

<h1>Hello</h1>  <!-- Should be black with background -->
<div id="my_div">
    <h1 class="my_div_child">Good bye</h1>  <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->