CSS: стили неупорядоченного списка

Question

Мне нужно создать класс CSS, который позволит мне перечислить все ингредиенты в рецепте.Вот спецификации для неупорядоченного списка:

• Левый отступ
• Без маркера или другого значка
• Нет пробела между заголовком (H2) и первым элементом в списке
• Нет пробелов между элементами в списке
• Пробел после последнего элемента в списке

Мне нужно сделать это без изменения обычных абзацев, обычных неупорядоченных списков или других настроек.

Хорошо разбирается в HTML;плохо разбирается в CSS, поэтому полезны явные указания.

Answer 1

CSS работает по приоритетам и идентификаторам.Чтобы настроить таргетинг на все элементы H2 на странице, вы должны объявить

h2 {
 color: #00FF00;
}

Однако вы также можете получить более конкретные и целевые элементы H2 только в DIV, например:

div h2 {
 color: #00FF00;
}

Вдольс таргетингом только на элементы, вы можете использовать либо идентификатор, либо имя CLASS, чтобы помочь в таргетинге.Используйте символы # для целевых идентификаторов и.to target 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;
}