Как указать, для какого списка навигации нужно создать правило стиля?

Question

Я создаю файл CSS, файл HTML, который мне дали. Он говорит мне, чтобы создать правило стиля для горизонтального списка. Я не уверен, как указать, какой список я редактирую при создании файла CSS. Вот с чем я работаю:

     <nav class="horizontal">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Menu</a></li>
           <li><a href="#">Locations</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">About Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <ul>
           <li><a href="#">Pizza</a></li>
           <li><a href="#">Salad</a></li>
           <li><a href="#">Pasta</a></li>
           <li><a href="#">Sandwiches</a></li>
           <li><a href="#">Appetizers</a></li>
           <li><a href="#">Pocket Pizzas</a></li>
           <li><a href="#">Fish &amp; Shrimp</a></li>
           <li><a href="#">Chicken &amp; Wings</a></li>
           <li><a href="#">Beverages</a></li>
           <li><a href="#">Dessert</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">Download Menu</a></li>
           <li><a href="#">Catering Menu</a></li>
        </ul>
     </nav>

Answer 1

Похоже, вы новичок в CSS.

Правила CSS состоят из двух частей: селектор, нацеливающий элемент (ы) на стиль, и свойства стиля, которые нужно применить.

Таким образом, в вашем случае возникает вопрос: какой селектор нацелится на горизонтальную навигацию? Глядя на ваш HTML, у рассматриваемого элемента есть класс, .horizontal, так:

.horizontal { /* style rules here */ }

В случае, если есть риск другого, неnav элементы, имеющие один и тот же класс, вы можете сжать свой селектор, чтобы соответствовать nav только элементы:

nav.horizontal { /* ... */ }

Answer 2

Вот пример того, как это выглядит:

nav ul { list-style: none; }
.horizontal { display: inline; }

Answer 3

Для этого мы используем селекторы в CSS CSS селекторы позволяют вам выбирать и управлять HTML-элементами

как вы предоставили класс для вашего списка, который вы будете использовать, вы должны использовать

.horizontal{

//rules goes here 
}