文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
社区首页 >问答首页 >不受尊重的灵活方向

问不受尊重的灵活方向
EN

Stack Overflow用户
提问于 2019-03-06 16:05:38
回答 4查看 190关注 0票数 0

我已经为某个应用程序创建了一个设置列表。所有设置的容器都是一个flex元素，而flex方向被设置为列。现在，我用类.option创建了一个div，并放置了一个h2和一个<select>。我将.option容器设置为flex，并将方向设置为row，但它不工作！它们堆积如山！

我试着制作h2和<select>内联块，我尝试将每个块的宽度设置为50%，没有。我将附上一个标签的屏幕截图，加上相关代码的html和css片段。

​

代码语言：javascript
代码运行次数：0
复制
#SettingsOverlay {
  display: block;
  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;
}

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

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

.option select {
  display: inline-block;
  width: 50%;
}
代码语言：javascript
代码运行次数：0
复制
<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>

​

UI不工作的图片

html
css
flexbox
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-03-06 16:19:15

您的规则.option被#SettingsOverlay div覆盖，将其转换为#SettingsOverlay > div或使用父ID #SettingsOverlay .option增加.option的css特性。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 专用性是浏览器决定哪些CSS属性值与元素最相关的方法，因此，它将被应用。特异性是基于由不同类型的CSS选择器组成的匹配规则。 如何计算特异性？ 专用性是应用于给定CSS声明的权重，该权重由匹配选择器中每个选择器类型的数目决定。当多个声明具有相同的特异性时，CSS中的最后一个声明将应用于元素。只有当同一元素被多个声明锁定时，才能应用专用性。根据CSS规则，直接目标元素总是优先于元素从其祖先继承的规则。

​

代码语言：javascript
代码运行次数：0
复制
#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%;
}
代码语言：javascript
代码运行次数：0
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2019-03-06 16:19:52

造成这一问题的原因是css选择器的优先级。ID优先级最高，其次是类、属性和伪类，然后是哪些元素和伪元素.

您的#SettingsOverlay div css选择器比#Options选择器和.option选择器都具有更高的优先级，而且由于它正在影响id of SettingsOverlay中的所有div元素，所以它在每个div上都设置了一个flex-direction of column。

要解决这个问题，您可以向div中添加一个类(这将降低它的优先级)，并将其作为css选择器来代替#SettingsOverlay div，如下例所示。

如果您不确定css的优先级，可以使用基根(氏)特异性计算器进行检查。

​

代码语言：javascript
代码运行次数：0
复制
#SettingsOverlay {
  display: none;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

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

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

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

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

.settingsOverlay {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
代码语言：javascript
代码运行次数：0
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2019-03-06 16:20:35

#SettingsOverlay div具有(1，0，1)的特异性，.option具有(0, 1, 0)的特异性，这意味着#SettingsOverlay div中的flex-direction优先。

您可以尝试将#SettingsOverlay div更改为#SettingsOverlay > div，这样它将只应用于它的直接子级(而不是它中的任何内容)。避免ID的最佳做法是因为它们具有很强的特殊性。

有关spcificity的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55027432

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档