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颜色将变为红色。请注意记住。 }