Flex Direction ne pas être respecté

Votre règle .Option code> est écrasée par #seettingsoverlay div code>, transformez-le en #settingsoverlay> div code> ou augmentez la spécification CSS de .Option code> à l'aide de l'ID parent #Settingsoverlay .Option code>

https://developer.mozilla.org/en-us / Docs / Web / CSS / Spécifie P>

Spécificité est le moyen par lequel les navigateurs décident quelles valeurs de propriété CSS sont les plus pertinentes pour un élément et, par conséquent, seront appliquées. La spécificité est basée sur les règles correspondantes composées de différentes sortes de sélecteurs CSS. P>

Comment la spécificité est-elle calculée? strong> p>

Spécificité est un poids appliqué à une déclaration CSS donnée, déterminée par le numéro de chaque type de sélecteur dans le sélecteur correspondant. Lorsque plusieurs déclarations ont une spécificité égale, la dernière déclaration trouvée dans le CSS est appliquée à l'élément. La spécificité ne s'applique que lorsque le même élément est ciblé par plusieurs déclarations. Selon les règles du CSS, des éléments ciblés directement présenteront toujours la priorité sur les règles qu'un élément hérite de son ancêtre. P> blockQuote>

p>

<div id='SettingsOverlay'>
  <div>
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value="GMT-12">GMT-12</option>
          <option value="GMT-11">GMT-11</option>
          <option value="GMT-10">GMT-10</option>
          <option value="GMT-9">GMT-9</option>
          <option value="GMT-8">GMT-8</option>
          <option value="GMT-7">GMT-7</option>
          <option value="GMT-6">GMT-6</option>
          <option value="GMT-5">GMT-5</option>
          <option value="GMT-4">GMT-4</option>
          <option value="GMT-3">GMT-3</option>
          <option value="GMT-2">GMT-2</option>
          <option value="GMT-1">GMT-1</option>
          <option value="GMT">GMT</option>
          <option value="GMT+1">GMT+1</option>
          <option value="GMT+2">GMT+2</option>
          <option value="GMT+3">GMT+3</option>
          <option value="GMT+4">GMT+4</option>
          <option value="GMT+5">GMT+5</option>
          <option value="GMT+6">GMT+6</option>
          <option value="GMT+7">GMT+7</option>
          <option value="GMT+8">GMT+8</option>
          <option value="GMT+9">GMT+9</option>
          <option value="GMT+10">GMT+10</option>
          <option value="GMT+11">GMT+11</option>
          <option value="GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

La raison de la question est due à la priorité des sélecteurs CSS. Les identifiants prennent la priorité la plus élevée, suivis de classes, d'attributs et de pseudo-classes, puis des éléments et des pseudo-éléments.

Votre #Settingsoverlay div code> sélecteur CSS a une priorité plus élevée que la fois que le # Options CODE> Sélecteur et le sélecteur CODE> .OPTION CODE> - Et parce qu'il a un impact sur tous les éléments div code> dans l'ID code> code> de Paraméingoverlay , il met un flex-direction code> de la colonne code> sur chaque div. p>

Pour résoudre ce problème, vous pouvez ajouter une classe à la DIV (qui réduira sa priorité) et l'utilisera comme un sélecteur CSS à la place de #settingsoverlay div code> comme l'exemple ci-dessous . P>

Si vous ne savez jamais quelle priorité votre CSS prend, vous pouvez utiliser Calculateur de spécificité de Keegan pour vérifier. p>

p>

<div id='SettingsOverlay'>
  <div class="settingsOverlay">
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value="GMT-12">GMT-12</option>
          <option value="GMT-11">GMT-11</option>
          <option value="GMT-10">GMT-10</option>
          <option value="GMT-9">GMT-9</option>
          <option value="GMT-8">GMT-8</option>
          <option value="GMT-7">GMT-7</option>
          <option value="GMT-6">GMT-6</option>
          <option value="GMT-5">GMT-5</option>
          <option value="GMT-4">GMT-4</option>
          <option value="GMT-3">GMT-3</option>
          <option value="GMT-2">GMT-2</option>
          <option value="GMT-1">GMT-1</option>
          <option value="GMT">GMT</option>
          <option value="GMT+1">GMT+1</option>
          <option value="GMT+2">GMT+2</option>
          <option value="GMT+3">GMT+3</option>
          <option value="GMT+4">GMT+4</option>
          <option value="GMT+5">GMT+5</option>
          <option value="GMT+6">GMT+6</option>
          <option value="GMT+7">GMT+7</option>
          <option value="GMT+8">GMT+8</option>
          <option value="GMT+9">GMT+9</option>
          <option value="GMT+10">GMT+10</option>
          <option value="GMT+11">GMT+11</option>
          <option value="GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

#SettingingSoverlay div a une spécificité de (1, 0, 1) et .OPTION a une spécificité de (0, 1, 0) ce qui signifie que le flex-direction dans #Settingsoverlay div prend la priorité.

Vous pouvez essayer de changer #settingingsoverlay div à #settingsoverlay> div , de sorte qu'il ne sera appliqué que sur ses enfants directs (plutôt que tout ce qui y est). Une meilleure pratique pour éviter les identifiants est à cause de leur forte spécificité.

voir https://developer.mozilla.org/en- US / DOCS / Web / CSS / Spécificité Pour plus d'informations sur la SPCIMICITY.