CSS: Unordered List Styling

Question

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

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

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

Хорошо в 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; 
} 

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

div h2 { 
color: #00FF00; 
} 

Наряду с нацеливание только элементов, вы можете использовать имя идентификатора или CLASS, чтобы помочь настроить таргетинг. Используйте символы # для целевых идентификаторов и. целевой КЛАССЫ

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 перезаписывает предыдущую. Просто помните, чтобы помнить. }