CSS：無序列表樣式

Question

我需要創建一個CSS類，它允許我列出配方中的所有成分。下面是無序列表規格：

• 左縮進
• 沒有子彈或其他圖標
• 在列表
• 在列表
項之間沒有空間標題（H2）和第一個項目之間沒有空間最後一個項目之後
• 空間列表

我需要做到這一點，而不影響普通段落，定期無序列表，或其他設置秒。

擅長HTML;窮人在CSS，所以明確的方向將是有益的。

Answer 1

h2 { 
    margin-bottom: 0; // eliminate distance from headline, applies to all h2s though 
} 
ul { 
    padding: 0 0 0 1em; // left indent, no other padding 
    margin: 0 0 1em 0; // space on bottom, maybe use a bottom-padding instead 
} 
ul li { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

Answer 2

CSS按優先級和標識符工作。指定網頁上的所有H2的元素，你將宣佈

h2 { 
color: #00FF00; 
} 

但是，你也可以得到更多的具體目標，例如一個DIV中只有H2元素：

div h2 { 
color: #00FF00; 
} 

隨着剛瞄準元素，您可以使用ID或CLASS名稱來幫助定位。使用＃符號來定位ID和。到目標類

HTML

<div id="ingredients"> 
<h2>Heading</h2> 
<ul> 
<li class="selected">Item 1</li> 
<li>Item 2</li> 
</ul> 
</div> 

CSS

#ingredients { 
    margin: 0em; 
    margin-left: 1em; 
    }  

    #ingredients h2 { 
     color: #00FF00; 
    margin-bottom: 0em; 
     } 

    #ingredients ul { 
    margin-bottom: 2em; 
    } 
    #ingredients ul li { 
    list-style: none; 
    margin: 0em .5em; 
    color: #00FFFF; 
    } 
    #ingredients ul li .selected { 
    color: #FFFF00; 
    } 

最後，CSS也有聲明的順序重要性，考慮下列

h1 { 
font-size: 2em; 
font-color: #000000; 
} 

h1 { 
font-color: #FF0000; 
} 

在這種情況下，由於第二個H1聲明會覆蓋前一個H1的顏色，因此H1顏色將變爲紅色。請注意記住。 }