Я тестировал с двумя идентификаторами, и второй идентификатор ничего не делает

 body {
      background-color:olive;
    }
    #container{
      background-color:;
      display:flex;
    }

    #container > a {
      
      background-color:chocolate;
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    

    #item-2 {

    }
    #item-4{
      margin-left:auto;
    }

    #bonus {

      background-color:red;
    }

<body>
<nav>
  <div id = "container">
    <a id = "item-1 bonus" href = "#">Information</a>
    <a id = "item-2 bonus" href = "#">Contacts</a>
    <a id = "item-3 bonus" href = "#">Media</a>
    <a id = "item-4" href = "#">Logout</a>
</div>
</nav>
</body>

Здравствуйте, может ли кто-нибудь сказать мне, почему "бонусный" класс не применяет background-color: red? Есть ли правило, по которому нельзя поставить два идентификатора или что-то в этом роде? Некоторые пояснения были бы действительно полезны. Спасибо.

html css

18.07.2018 08:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

Какие допустимые значения для атрибута id в HTML?

Прочтите это относительно атрибута HTML id.

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

18.07.2018 08:38

Это не действительный id. Вы можете использовать class вместо id. Кроме того, обновите свой стиль для bonus до следующего, чтобы получить правильную специфику. Для получения подробной информации см. Специфика CSS.

body {
      background-color:olive;
    }
    #container{
      background-color:;
      display:flex;
    }

    #container > a {
      
      background-color:chocolate;
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    

    #item-2 {

    }
    #item-4{
      margin-left:auto;
    }

    #container > a.bonus {

      background-color:red;
    }

<body>
<nav>
  <div id = "container">
    <a id = "item-1" class = "bonus" href = "#">Information</a>
    <a id = "item-2" class = "bonus" href = "#">Contacts</a>
    <a id = "item-3" class = "bonus" href = "#">Media</a>
    <a id = "item-4" href = "#">Logout</a>
</div>
</nav>
</body>

18.07.2018 08:40

body {
      background-color:olive;
    }
    .container{
      background-color:;
      display:flex;
    }

    .container > a {
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    
    .link {
      background-color: chocolate;
    }
    

    .item-2 {

    }
    .item-4{
      margin-left:auto;
    }

    .bonus {

      background-color:red;
    }

<body>
<nav>
  <div class = "container">
    <a class = "item-1 bonus link" href = "#">Information</a>
    <a class = "item-2 bonus link" href = "#">Contacts</a>
    <a class = "item-3 bonus link" href = "#">Media</a>
    <a class = "item-4 bonus link" href = "#">Logout</a>
</div>
</nav>
</body>

Советую всегда использовать class вместо id (читайте в этой теме: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4).

Обратите внимание, что я удалил свойство background-color: chocolate, потому что селектор .container> a сильнее, чем бонус.

18.07.2018 08:46