Проблема с сокрытием элемента div с помощью простой функции JavaScript

Question

Я работаю над очень маленьким проектом, и я попытался сделать div, дал ему css style, и я не могу его скрыть, и я не могу понять, почему.

 var button = document.getElementById("button");
    button.addEventListener("click", open);
    var popup = document.getElementById("popup");

    function open() {
      popup.classList.toggle("hidden");
    }

* {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      #popup {
        width: 15em;
        height: 20em;
        background-color: rgb(51, 50, 50);
        color: rgb(0, 159, 252);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1em;
      }
      .labels {
        padding: 0.5em 0;
      }
      .inputs {
        background-color: white;
        color: rgb (51, 50, 50);
      }
      .bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-end;
        width: 100%;
      }
      #cancel {
        color: red;
        position: relative;
        bottom: -5em;
        left: 3em;
      }
      #confirm {
        position: relative;
        bottom: -5em;
        left: 2em;
        color: rgb(0, 159, 252);
      }
      .hidden {
        display: none;
      }

<input type="button" value="OPEN" id="button" />
    <div id="popup" class="hidden">
      <h2>Add town</h2>
      <label for="name" class="labels"><span>Name</span></label>
      <input type="text" name="name" id="nameInput" class="inputs" />
      <label for="country" class="labels"><span>Country</span></label>
      <input type="text" name="country" id="countryInput" class="inputs" />
      <div class="bottom">
        <p id="cancel">Cancel</p>
        <p id="confirm">Confirm</p>
      </div>
    </div>

Я пытался использовать inspect в Chrome, но я не получаю никаких ошибок.

Answer 1

Вы не можете скрыть свой div, потому что он имеет отображение flex, предоставляемое селектором id. Поскольку id селектор имеет приоритет над вашим hidden классом. Что вы можете сделать, так это объединить селектор класса hidden с идентификатором. Также здесь есть хорошая статья о Специфика в CSS.

#popup.hidden {
  display: none;
}

Answer 2

Ваша проблема связана с приоритетом CSS. display:none заменяется на более высокий приоритет display:flex, определенный внутри #popup.

Поэтому вы должны использовать:

display:none !important;

Answer 3

У вас есть #popup{display: flex;}, который перезаписывает ваш .class{display:none;}