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

我有一个任务，其中有一部分需要使用包含样式表中的“大纲”类创建简单的有序列表。此外，我需要一个有序列表，只是默认的样式..如何从样式表类中提取特定样式HTML

这是我迄今为止，但无论我改变风格，以两个列表仍然罗马数字编号..我认为我的语法是关闭somehwere，但无法在网上找到解决方案。

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

如果我将大纲类的风格改为低α或另一个，那么列表的编号是不是应该改变？

来源

2016-06-07 Austin A

你想的要点？ – BradTheBrutalitist

记住>意味着嵌套，而+意味着对/等于

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>

来源

2016-06-07 21:47:58 gibberish

ohhhh，@gibberish，我认为我只是通过口述什么风格来控制每个列表的风格。我没有意识到，嵌套和同行/同等设置每个列表不同的风格。非常感谢您为我解决这个问题 –

很高兴为您提供帮助。要结束该问题，请注意*（通过点击答案旁边的箭头）* **和/或**标记为最佳答案*（通过点击问题旁边的复选标记）*。 – gibberish

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

回答

相关问题