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，使用 .定位到 CLASSES

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 颜色将为红色。只是要记住的注意事项。 }