0

I'm using media queries for the first time for my portfolio website. I have to use **!important** statement when I need to alter, lets say, padding of a logo for a portrait version and also for a landscape version. I have an external stylesheet linked to my media query stylesheet and to over-ride styles from the main stylesheet I have to use important for my media query in order for it to listen to it.

The !important tags are stopping me from re-styling other devices further down the stylesheet because they are needed in order to style my ipad version of my website.

Seems that I can add a style into a query that is new like display:none, but if I need to add padding-left:20px, I need the !important tag to over ride the main stylesheet.

Can you help?

4

2 回答 2

2

正如先前的答案所述，最好避免使用 !important ，除非在一些非常具体和有限的情况下。

如果您发现您正在使用它来覆盖样式，则可能是几个不同问题的症状。也许您正在使用#header #logo第一条规则中的高特异性选择器，并尝试在媒体查询块中使用 .logo 之类的类来覆盖它。

另一个原因可能是长选择器，例如#header #header-inner .logo-wrap #logo这也是一个非常糟糕的主意。更多来自 Harry Roberts 的信息，请访问http://csswizardry.com/2012/05/keep-your-css-selectors-short/

没有看到你的代码很难知道，但总的来说，尽量缩短选择器并使用模块化的 CSS 方法会有所帮助。

只是为了添加到chipcullen的列表中何时可以使用！important：

  • 在 HTML 电子邮件中
  • 如果您需要一个辅助类来覆盖所有内容，例如 .valid 或 .hidden
  • 覆盖使用它的浏览器默认样式表

如打印样式表中所述，以及使用无法更改的第 3 方代码时。

（我不同意它应该用于覆盖 JavaScript 注入的样式，因为有更好的方法可以通过操作类名来实现相同的目的，从而回避问题。classList API 使这非常容易，并且也有可用的 polyfill。 )

于 2013-01-22T22:29:57.333 回答
0

正如第一位评论者所说，我们需要看一些代码。

总体而言，听起来您遇到了特异性问题。!important除了以下三种情况，您真的不需要使用：

  • 覆盖 JavaScript 应用的样式
  • 在打印样式表中
  • 更改从外部源加载的元素，您无法编辑原始样式

当涉及到媒体查询和特异性时，请记住顺序很重要。如果选择器具有相同级别的特异性，则最后一个获胜。一般来说，使用媒体查询构建样式表的一个好方法是：

  1. 在大多数情况下适用的全局样式 - 从移动尺寸设备开始（即“移动优先”）
  2. 稍后的媒体查询会“增加”大小 - 越来越大，并根据需要应用样式覆盖
于 2013-01-22T19:18:17.390 回答