为什么 Firebug 显示的 CSS 样式与我在 CSS 文件中看到的样式如此不同？

Question

我正在尝试对网站进行一些 CSS 更改。例如，当我使用 Firebug 检查元素时，我发现 class bordered 我需要对其进行一些更改。 Firebug 告诉我这个 class 在一个名为 Desktop.css 的文件中。这些是 Firebug 为 class 显示的样式规则 bordered:

.bordered {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #d9d9d9 #d9d9d9;
    border-image: none;
    border-radius: 5px;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

但是当我查看实际的 Desktop.css 文件时，我看到 class bordered 的样式规则是：

.bordered {
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 5px;
}

我一定是在做傻事！为什么我会在 Firebug 和实际的 CSS 文件中看到这样的差异？

Answer 1

Firebug 会将您的 CSS 规则解析为完整形式。

background 属性.

是一个比较简洁的好例子

background实际上是一种shorthand写法

background-color
background-image
background-repeat
background-attachment
background-position

因此，如果我们编写 background: #f00;，我们将获得红色背景，并且背景的所有其他属性都将设置为其默认值。

Firebug 将显示包括默认值在内的完整值，在本例中为：

background: #ff0000 none repeat scroll 0 0;

为什么 Firebug 显示的 CSS 样式与我在 CSS 文件中看到的样式如此不同？

Why are CSS styles displayed by Firebug so different to what I'm seeing in the CSS file?

css

firebug