Question

首先，我要说的是我一直在寻找这种解决方案，并且完全陷入困境。我遵循了在其他css规则之后从单独文件导入媒体查询的建议，我使用祖先定位查询中的跨度以尝试覆盖内联样式，我已经尝试了几乎所有其他方法考虑到。

当前，我有一个要在页面宽度介于0px和600px之间时呈现的嵌套范围的范围。我正在使用react，所以我必须遵循他们的内联样式指导。本质上，我创建了一个带有显示的对象：没有样式规则作为键值对。然后，我将其传递给JSX。从本质上讲，它看起来像这样。

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，从而消除了一些优先级问题。

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

1 个答案: