html - * css 规则正在改变我的列表在 div 中的显示方式

我是一名教师，在一所高中教授基本的 HTML 和 CSS。上周我们讨论和练习列表，这周我们讨论div类的话题。我正在尝试将列表放入 div，同时使用 * 消除 div 内部和周围不需要的空间。通过这样做，列表不再停留在 div 中。我需要做什么才能获得 div 中的列表编号？

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>

最佳答案

以下是您可能想对学生说的话:

问题是您设置的 * ( universal selector ) 规则正在重置默认浏览器样式。

大多数浏览器都有一组用于呈现 HTML 文档的默认样式。以下是 W3C 推荐的默认样式列表:

https://www.w3.org/TR/CSS22/sample.html

从该文档中可以看出，鼓励浏览器为 ul 和 ol 元素创建顶部和底部边距。

blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }

还鼓励他们设置这些默认值:

ol, ul, dir,
menu, dd        { margin-left: 40px }

ol              { list-style-type: decimal }

ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }

请注意，某些浏览器可能会使用 padding 而不是 margin 。

因此，当您设置此规则时...

* {
  margin: 0px;
  padding: 0px
}

它覆盖浏览器样式( in accordance with the cascade )。

但是你写道:



那么为什么不只关注 div 呢？为什么要针对所有元素？

也许这就是你想要的:

div {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px;
}

div {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>

关于html - * css 规则正在改变我的列表在 div 中的显示方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49032198/