Навигационная панель не принимает цвет фона

#html #css #nav

Вопрос:

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

 * {
  background-color: rgb(245, 244, 182);
  box-sizing: border-box;
}

.nav {
  background-color: red;
  border: 2px solid blue;
}

 <header>
  <ul class="nav">
    <li>home</li>
    <li>about</li>
    <li>contact us</li>
    <li>services</li>
    </nav>
</header>

Ответ №1:

«*» выберите все элементы, это хорошо для «размера коробки». Но не лучший способ применить цвет фона на всей странице («тело» или «html»).

(У меня были некоторые отступы, отображение встроенного и скрытие стиля списка в вашем css 🙂

   * {
             box-sizing: border-box;
        }

        body {
            background-color: rgb(245, 244, 182);
        }
        
        .nav{
            background-color:red;
            border: 2px solid blue;
            padding: 10px;
        }
        
        ul {
        list-style: none;
        }
        
        li {display: inline;
        background-color: green;
        padding: 4px 10px;}

          <header>
                <nav class="nav">
                    <ul>
                       <li>home</li>
                       <li>about</li>
                       <li>contact us</li>
                       <li>services</li>
                    </ul>
                </nav>
            </header>

Ответ №2:

Используйте body вместо * , и это сработает.

Если * используется в качестве независимого селектора, это означает все. Это означает, что он применит стиль ко всем элементам. Вы также должны использовать <ul> для окружения своих <li> элементов.

 body {
    background-color: rgb(245, 244, 182);
    box-sizing: border-box;
}

.nav{
    background-color:red;
    border: 2px solid blue;
}

 <header>
    <nav class="nav">
    <ul>
        <li>home</li>
        <li>about</li>
        <li>contact us</li>
        <li>services</li>
        </ul>
    </nav>
</header>