display: none; 失效求助：qrcode-big 无法隐藏原因排查

Hey there! Let's break down why your display: none; style on the i-header inside your qrcode-big component is getting struck through and not taking effect. Here are the most common culprits and fixes:

1. CSS Specificity is Beating Your Rule #

When a style gets struck through in dev tools, it almost always means another CSS rule with higher specificity is overriding it. For example:

• If the i-header has an inline style like <div class="i-header" style="display: block">, inline styles have higher priority than external CSS.
• Or if there's a more specific selector elsewhere, like .page-wrapper .qrcode-big .i-header, while your rule is just .i-header—the more specific one wins.

Fixes: #

• Use a more targeted selector that matches or exceeds the specificity of the overriding rule. For example:

  #qrcode-container .qrcode-big .i-header {
    display: none;
  }
  

• If inline styles are the issue, either remove the inline display property, or use !important as a last resort (try to avoid this unless necessary, since it can make future style maintenance harder):

  .i-header {
    display: none !important;
  }
  

2. Dynamic JavaScript is Overriding Your Style #

It's possible that some JavaScript in your component is dynamically setting the display property on the i-header at runtime (like element.style.display = 'block'). Inline styles added via JS take precedence over external CSS, which would strike through your rule.

Fixes: #

• Check the component's JavaScript code for any lines that modify the i-header's style. Look for methods like style.display, classList.add, or framework-specific directives (like Vue's v-show or React's style prop).
• Adjust the JS logic to respect your hidden state, or use the !important flag in CSS to override the dynamic style (again, only if you can't fix the JS directly).

3. Style Isolation in Framework Components #

If you're using a framework like Vue or React with scoped styles (Vue's scoped attribute, React's CSS Modules), your external style might not be able to penetrate the component's encapsulated styles.

Fixes: #

• For Vue with scoped styles, use a deep selector to target the inner i-header:

  ::v-deep .qrcode-big .i-header {
    display: none;
  }
  

  (For older Vue versions, you might need /deep/ .qrcode-big .i-header instead.)
• For React with CSS Modules, switch to using a global stylesheet for this rule, or adjust the component to accept a prop that controls the i-header's visibility.

4. Media Queries or Inherited Styles #

Sometimes a media query (like @media (min-width: 768px)) that applies to your current screen size is overriding your display: none; rule. Or a parent element's styles might be forcing the i-header to show.

Fixes: #

• Open your browser's dev tools (F12), go to the Elements tab, and select the i-header element. Look at the Styles panel to see which rule is overriding your display: none;—it will be listed above your struck-through rule, with a higher specificity or later placement in the CSS.
• Adjust your rule to either match that specificity, or place your CSS after the overriding rule in the stylesheet.

Quick Debug Tip #

Always use your browser's dev tools to inspect the element: right-click the i-header → Inspect. The Styles panel will show you exactly which rules are being applied, which ones are overridden, and where the winning rule is coming from. This is the fastest way to pinpoint the issue!

内容的提问来源于stack exchange，提问作者user7693832