2016-06-07 91 views
1

我有一個任務,其中有一部分需要使用包含樣式表中的「大綱」類創建簡單的有序列表。此外,我需要一個有序列表,只是默認的樣式..如何從樣式表類中提取特定樣式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; 
} 

如果我將大綱類的風格改爲低α或另一個,那麼列表的編號是不是應該改變?

+0

你想的要點? – BradTheBrutalitist

回答

0

記住>意味着嵌套,而+意味着對/等於

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>

+0

ohhhh,@gibberish,我認爲我只是通過口述什麼風格來控制每個列表的風格。我沒有意識到,嵌套和同行/同等設置每個列表不同的風格。非常感謝您爲我解決這個問題 –

+0

很高興爲您提供幫助。要結束該問題,請注意*(通過點擊答案旁邊的箭頭)* **和/或**標記爲最佳答案*(通過點擊問題旁邊的複選標記)*。 – gibberish