Question

我需要创建一个CSS类，它允许我列出食谱中的所有成分。以下是无序列表的规范：

左缩进
没有子弹或其他图标
标题（H2）与列表中的第一项之间没有空格
列表中的项目之间没有空格
列表中最后一项之后的空格

我需要在不影响常规段落，常规无序列表或其他设置的情况下执行此操作。

擅长HTML; CSS很差，所以明确的指示会有所帮助。

Answer 1

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声明会覆盖前一个声明。请注意记住。 }

Answer 2

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

CSS：无序列表样式

2 个答案: