如何从样式表中提取特定样式 class HTML

Question

我有一个作业，其中有一部分需要使用包含样式 sheet 的 "outline" class 创建一个简单的有序列表。另外我需要一个只有默认样式的有序列表..

这是我目前所拥有的，但是无论我将样式更改为什么，两个列表都仍然使用罗马数字进行编号。我认为我的语法有问题，但无法在线找到解决方案。

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

这是样式的相关部分sheet。

    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;
}

如果我将具有大纲 class 的样式更改为 lower-alpha 或其他样式，列表的编号是否应该更改？

Answer 1

记住 > 表示嵌套，而 + 表示 peer/equal

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;
}

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

如何从样式表中提取特定样式 class HTML

How to pull specific styles from a stylesheet class HTML

html

css

stylesheet