css - Flexbox 似乎忽略了 CSS 特异性-6ren

css - Flexbox 似乎忽略了 CSS 特异性

转载作者：行者123 更新时间：2023-11-28 10:14:16

24

4

我正在尝试以与 Facebook's CSS layout project 相同的方式使用 Flex-By-Default| .在覆盖 display: inline-flex 元素的样式时，我遇到了一些麻烦。每this jsfiddle :

带有两个“.test-me”div 的 HTML:

<body>
  <h1>TEST</h1>
  <div class="test-me">
        I'm correctly displayed as inline-flex
  </div>
  <div>
    <div class="test-me">
         'Styles' shows inline-flex, but 'Computed' shows flex
    </div>
  </div>
</body>

这是样式:

.test-me {
  display: inline-flex;
  background-color: green;
  border: 1px solid black;
  margin: 6px;
}
div, span {
  display: flex;
  /* Commenting out flex-direction makes second test-me div display correctly */
  flex-direction: column; 
  background-color: purple;
}

我有点担心这是一个浏览器错误:在 Chrome 开发者工具中，“Styles”显示“inline-flex”获胜(因为它来自更具体的样式)，但“Computed”显示“flex”。

即使“display: flex”被划掉了(因为它被“display: inline-block”覆盖了)，禁用已经被划掉的样式可以解决这个问题。

最佳答案

修改后的答案

@BoltClock，在评论中提供了 spec 中的相关部分涵盖此行为。

Section 4. Flex Items

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

这意味着在问题中描述的场景中， flex 容器的子项被赋予一个内联级值，该子级计算到它的 block 级等价物。简而言之，带有 display: inline-flex 的 flex item 变成了 display: flex。

原始答案

I am am slightly concerned this is a browser bug: in Chrome Developer Tools, 'Styles' shows 'inline-flex' winning (as it's from the more specific styling), but 'Computed' shows 'flex'.

在 Chrome、Firefox 和 Internet Explorer 11 中测试了您的代码。行为完全相同。所以我不会说这是浏览器错误。

尽管您是正确的，在 Chrome(和 Firefox)中，检查器显示具有 inline-flex 的“Styles”和具有 flex 的“Computed”，但在 IE11 中它显示 inline-flex 在两个 Pane 上，但它仍然像其他 Pane 一样呈现。

阅读 spec建议 flex 元素只能是 block 元素。即使您将 display: inline-flex 应用于 div，相同的 div 也是一个更大容器的 flex 元素，其中包含 显示: flex 。具有 inline-flex 的 flex 元素可能作为 flex formatting context 的一部分被覆盖.

虽然没有直接引用规范，但这里有另一个可能有用的答案:https://stackoverflow.com/a/27090088/3597276

关于css - Flexbox 似乎忽略了 CSS 特异性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33739617/

24

4

0

文章推荐：没有 Storyboard的Swift实例化ViewController？编程

文章推荐： regex - 提取href url的正则表达式

文章推荐： css - Google 字体在 Chrome 中呈现不佳

Delphi 通用类型 - 特异性？
我正在尝试在 delphi 下创建一个名为 TRange 的通用类。这个想法是，它可以是整数范围或单精度范围或 double 范围等... TRange 对象包含一些 T 类型的变量(maxValue
Javascript 特异性(仅响应单击的项目)
我对 Javascript 非常陌生，正在寻找一种方法让我的代码仅响应列表中单击的项目。 (完整的 JSFiddle 在这里: http://jsfiddle.net/5cjPF/ ，尽管由于某种原因
具有多个类的元素的 CSS 特异性
我遇到了一个问题，我无法获得使某些代码正常工作所需的特异性级别。我有一个我想为其制作的背景悬停在带有花哨的小滑入动画上时会发生变化。我设法使用 linear-gradient 让它工作得很好用
CSS 特异性，父容器否决子容器
我在使用一些自定义的 960.gs 类时遇到了一些困难。当我使用子容器时出现问题，子容器的列只是继承主容器列规则的宽度。在我看来，内部单元格 (foo + bar) 应该是绿色的。这意味着他们应该获
CSS 特异性/继承问题
我将第 3 方组件附加到 div 元素(容器)。此 div 元素位于 from 内，表单具有 cssform 类。我使用的主要 CSS 表包含定义: .cssform div { max-wi
CSS 特异性 - 外部样式表与仅使用类的内部样式表
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1和 .c-hero__headline .在我的外部样式表中，我使用 .c-headline-1在内部样式表 ( ) 中，我使
Css 特异性——样式表中链接样式的问题
我在这里对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式，由于某种原因，当我使用 Chrome 开发工具或 Firebug 检查页面时，其中一个随机样式会被其他样式覆盖。在摆弄 !impor
CSS 特异性、媒体查询和最小宽度
我正在重新设计我的博客，考虑到响应式网页设计和“移动优先”方法 - 简而言之，我正在尝试使用最小宽度来避免任何类型的复制或 css.. 没有显示:无等.. 我的问题是，当我确实需要覆盖 CSS 值时，
CSS 特异性 - 定义类和 ID
我一直在阅读有关特异性的内容，坦率地说，我很惊讶我之前没有正确了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性可能会带来的问题方式。所以，我对这个主题做了一些研究，现在我了解了计算特异性的
CSS 特异性 - 定义类和 ID
我一直在阅读特异性，坦率地说，令我惊讶的是我之前没有正确地了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性会带来的问题方式。因此，我一直在对该主题进行一些研究，现在我了解了计算特异性的规则
Css 特异性 :last-child
我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。所以这就是我想到的: #menu ul:last-child li a { /*.....*/ } 我无法手
css3 nth-child 特异性
为什么这两个结果不等价？第一个显示绿色行，而第二个不显示。唯一不同的是html c 还有，nth-child选择器的特殊性是什么？ Stripe Test
html - 电子邮件设计中属性选择器和用户代理样式表之间的 css 特异性
我正在制作响应式电子邮件模板，并希望申请 display: block !important至 2 元素，以便从 2 列布局变为 1 列布局。我正在使用以下选择器: td[class="mainArt
CSS 继承与 CSS 特异性
我在大学计算机科学系的 Web 开发课上，老师问类(class):“为什么类选择器规则应用在标签选择器规则之上(参见示例代码)？”。我回答说这是因为 CSS 的特殊性，我被告知我错了。他想要的答案是因
html - CSS 特异性 - 跨浏览器问题
这对我来说是一个学习练习，所以在此先感谢您没有告诉我为什么我不想执行以下操作。我不想做，我想明白。给定以下 CSS: input[type="file"]:focus, input[type="ra
CSS !important 规则使用，特异性
我正在编写一堆 PHP 类，它们将用于创建 Wordpress 插件，但也可以在任何其他环境中使用。在自己测试我的脚本之后，一切似乎都很好，但是当我为它创建一个 WP 插件时，出现了我预见到的 CSS
基于样式表中顺序的 CSS 特异性/优先级？
我简单看了下CSS3 Selectors spec但找不到任何解决这个问题的方法。此外，我没想到当您移动 CSS 声明时结果会发生变化，但它确实发生了变化。任何帮助都会很棒。 div.green_co
html - css 特异性 - 没有更具体的类
假设我有以下 CSS: .InfoTable-main-table tbody tr td:before{ background: #222; color: #fff; c
html - 特异性 CSS 问题
因 CSS 存在特殊性问题而发疯。HTML。
css - 命名元素内的超链接 css 特异性
http://jsfiddle.net/DkAqZ/9 HTML default black text default red link #inner gr

首页

博学

6Ren·AI

商城

css - Flexbox 似乎忽略了 CSS 特异性