Question

我的主样式表设置了我网站的所有样式。但我有一个div作为菜单打开。我需要它拥有它自己的风格，我不能拥有它或它的主要样式表中的任何风格固有的死者。但是在我重新设置了样式之后，然后将div设计为类似于它的全新元素。我找到了所有：初始;休息的元素。和#we_gallery_edit_window＆gt; *有点作品。但是当我尝试宣布新款式时，由于优先权，一些新款式不会被采用。这是我目前的代码：

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。

首先，如果您想使用h1类设置my_div_child的样式，则规则为h1.my_div_child，或者只是.my_div_child，如果您不这样做t具有该类名的其他非h1元素。使用.my_div_child h1会在父容器中选择h1标记，其类别为my_div_child，而不是HTML显示的内容。

如果要重置#my_div的子项的样式，可以像使用通配符一样使用all: initial选择器，但不要使用直接子选择器（＆gt;），而只是定期嵌套通配符：

#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 -->

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

1 个答案: