YUI CSS 缩小问题答案

【问题标题】：YUI CSS Minification issuesYUI CSS 缩小问题
【发布时间】：2015-04-09 11:31:51
【问题描述】：

我有 2 个 css 文件，它们被缩小并合并为一个文件。但是同一个元素的 CSS 属性没有合并。

file1.css // 这来自一个公共库

body { position: relative; margin: auto; }

file2.css //这是一个项目特定的样式

body { position: static }

min.css

body{position: relative; margin: auto}
body{position:static}

我希望position: static 优先于position: relative

【问题讨论】：

【解决方案1】：

这不是错误，YUI Compressor 不会合并 CSS 选择器。
这是一种选择，也是有原因的。

以这个 CSS 为例：

/* file1.css */
.foo {
  color: red;
}
.bar {
  color: blue;
}

/* file2.css */
.foo {
  color: yellow;
}

还有这个 HTML：

<p class="foo bar">Hello world!</p>

这就是我们所拥有的：

无文件组合

/* file1.css */
.foo{color:red;}.bar{color:blue;}

/* file2.css */
.foo{color:yellow;}

颜色是YELLOW，因为声明的顺序。

/* file1.css */
.foo{color:red;}.bar{color:blue;}.foo{color:yellow;}

颜色是黄色，同理。

/* file1.css */
.foo{color:yellow;}.bar{color:blue;}

颜色是BLUE，因为我们的元素有两个选择器，并且在缩小过程中黄色的值已经被移动了。

【讨论】：

【解决方案2】：

在你的 xml 配置文件中颠倒 css 文件的顺序。

【讨论】：

哪个配置文件，你的意思是我网页的母版页文件吗？
你是如何缩小你的css文件的，意味着你在哪里指定要缩小的文件名？
我将其添加为预构建事件的一部分。我更改了我的 css 文件的顺序，缩小文件中的属性顺序确实发生了更改，但仍然应用了“位置：相对”。
位置：静态！重要；会起作用，但这不是一个好的解决方案。您可以尝试添加具有 css 属性的附加 css 类作为位置：静态。
@Arpit 您误解了 OP 的问题。问题不在于应用static 而不是relative（这是正常的，也是预期的行为），而是两个值都显示在最终缩小的CSS 中。应该只有最后一个，因为它们共享相同的选择器。