Question

我有一个赋值，其中有一部分我需要使用包含的样式表中的“outline”类创建一个简单的有序列表。另外，我需要一个只有默认样式的有序列表。

这就是我到目前为止所做的，但不管我改变了两个列表的样式仍然用罗马数字编号。我认为我的语法有些不合适但无法在线找到解决方案。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Assignment 1 - First Page</title>
    <link rel="stylesheet" type="text/css" media="screen" href="assignment1-style.css">
  </head>

  <body>
    <h3>Sports</h3>
    <dl>
      <dt>Football</dt>
      <dd>Most Popular Sport in America</dd>
      <dt>Soccer</dt>
      <dd>Most Popular Sport Worldwide</dd>
      <dt>Ping Pong</dt>
      <dd>A Very Underrated Sport</dd>
    </dl>
    <h3>Cities</h3>
    <ol>
      <li>Atlanta</li>
      <li>New York</li>
      <li>Los Angeles</li>
      <ol type="a" start="4">
        <li>Nashville</li>
        <li>Charlotte</li>
        <li>Oklahoma City</li>
      </ol>
    </ol>
    <h3>The Best Quarterbacks of All Time</h3>
    <ol class="outline" type="A">
      <li>Peyton Mannning</li>
      <li>Tom Brady</li>
      <li>Joe Montana</li>
      <li>Dan Marino</li>
      <ol class="outline" start="5">
        <h4>Second Tier</h4>
        <li>Steve Young</li>
        <li>Warren Moon</li>
        <li>Terry Bradshaw</li>
      </ol>
    </ol>

    <h5><a href="second.html">Part Two of this Assignment</a></h5>
    <h5><a href="https://en.wikipedia.org/wiki/Football">More Reading on Football</a></h5>
    <p>This is a paragraph</p>
  </body>

</html>

这是样式表的相关部分。

    ol > li {
  list-style-type: upper-roman;
  color: #00f5ff;
  /* turquoise1 */
}

ol > li > ol > li {
  list-style-type: upper-alpha;
  color: #00c5cd;
  /* turquoise3 */
}


/* outline line style lists */

ol.outline > li {
  list-style-type: upper-roman;
  color: #ff3e96;
  /* VioletRed1 */
}

ol.outline > li > ol > li {
  list-style-type: upper-alpha;
  color: #f0f;
  /* Magenta */
}

ol.outline > li > ol > li > ol > li {
  list-style-type: decimal;
}

ol.outline > li > ol > li > ol > li > ol > li {
  list-style-type: lower-alpha;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-roman;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-greek;
}

如果我要将大纲类的样式更改为较低的alpha或另一个，那么列表的编号是否应该更改？

Answer 1

请记住，into表示嵌套，而>表示对等/等等

＆＃13;

ol > li {
  list-style-type: upper-roman;
  color: #00f5ff;  /* turquoise1 */
}

ol > li > ol > li {
  list-style-type: upper-alpha;
  color: #00c5cd;  /* turquoise3 */
}

/* outline line style lists */
ol.outline > li { /* PeytonM, TomB, JoeM, DanM */
  list-style-type: upper-roman;
  color: purple;  /* VioletRed1 */
}

ol.outline > li + ol > li { /* SHOULD BE + ol not > ol */
  list-style-type: upper-alpha;
  color: #f0f;  /* Magenta */
}

ol.outline > li > ol > li > ol >  li {
  list-style-type: decimal;
}


ol.outline > li > ol > li > ol > li > ol > li {
  list-style-type: lower-alpha;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-roman;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-greek;
}

＆＃13;

如何从样式表类HTML

1 个答案: