为什么我的媒体查询没有优先于我的内联 JSX 样式？

Question

首先，让我说我已经到处寻找这个解决方案并且完全陷入困境。在我的其他 css 规则之后，我遵循了从单独文件中导入媒体查询的建议，我使用了一个祖先来定位查询中的 span 以尝试覆盖内联样式，我已经尝试了我能做的所有其他事情考虑到。

目前，当页面宽度介于 0px 和 600px 之间时，我有一个包含嵌套跨度的跨度。我正在使用 react，所以我必须遵循他们的内联样式指南。本质上，我创建了一个带有 display: none 样式规则的对象作为键值对。然后我将它传递给 JSX 的 span。所以本质上，它看起来像这样。

const hidden = {
   display: 'none'
}
...
<span className="blah" style={hidden}>
   <span>blah</span>
   <span>: </span>
   {deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>

所以现在我的媒体查询中有：

@media screen and (min-width: 0px) and (max-width: 600px) {
   //other rules that work fine
   ...
   .blah-ancestor > .blah {
      display: inline //I've tried inline, inline-block, and block, none of which are working.
   }
}

拜托，我真的需要一些帮助。我真的很担心这个问题，我的工具带里有 0 个工具来处理这种错误，因为我从来没有遇到过这样的问题。

Answer 1

内联样式始终优先于内部或嵌入式 CSS，以及外部 CSS。这在某种程度上显示在<style> MDN documentation 上。

您可以简单地删除内联样式并使用两个媒体查询或移动优先方法来显示/隐藏.blah。

这是移动优先的方法：

// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
   display: inline;
}

// Small screens above 600px
@media screen and (min-width: 601px) {
   .blah-ancestor > .blah {
      display: none;
   }
}

这样您就完全摆脱了内联 CSS，从而消除了一些优先级问题。