html - flex 方向不被尊重

Question

<分区>

Answer 1

你的规则 .option 被 #SettingsOverlay div 覆盖，把它变成 #SettingsOverlay > div 或者增加 的 css specifity .option 同时使用父 ID #SettingsOverlay .option

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

How is specificity calculated?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

#SettingsOverlay {
 /* display: none;*/
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#SettingsOverlay div {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#Options {
  display: flex;
  flex-direction: column;
}

#SettingsOverlay  .option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}

<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>