Question

我有一个简单的local.xml，试图在我的头块中包含一个自定义的wc_styles.css，以申请我的Magento网站中的所有页面。

<?xml version="1.0"?>
<layout>
    <default>

    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <file>css/wc_styles.css</file>
        </action>

        <action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>

    </reference>


    </default>
</layout>

在查看我网站的来源时，我的wc_styles.css被包含在所有父主题css文件之上（全部在html head标签内），因此我的自定义css规则基本上被取消了。

让自定义css工作的正确方法是什么？

编辑注意： 我只是试着去看看＆amp;感受Magento 1.9 RWD主题的变化。我已经在

为我的副主题创建了文件夹

\应用\设计\前端\ WC \默认

\皮肤\前端\ WC \默认

我的local.xml位于： \应用\设计\前端\ warecompare \默认\布局

我的wc_styles.css位于 \皮肤\前端\ warecompare \默认\ CSS

这就是我的网站的源代码看起来像你看到我的wc_styles.css出现在父母styles.css上面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://localhost/mg1/js/blank.html';
    var BLANK_IMG = 'http://localhost/mg1/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/base/default/css/et_advancedcompare/noreload.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/wc/default/css/wc_styles.css" media="all" />
<!-- big heap of javascript includes here-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />
<!--[if  (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles-ie8.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland.css" media="all" />
<!--<![endif]-->

Answer 1

Magento将在处理完每个布局文件后处理local.xml文件。因此，如果您想扩展某些内容或需要删除某些内容，可以使用local.xml文件。

通常，layout.xml中包含的css文件最后会加载。假设您尝试通过不同的布局文件加载不同的css文件。参见演示

LAYOUT FILE         STYLE NAME          HANDLER USED
-----------------------------------------------------
layout1.xml     =>  style1.css      =>  default
                =>  style2.css      =>  cms_page

layout2.xml     =>  style3.css      =>  default

layout3.xml     =>  style4.xml      =>  default
                =>  style5.xml      =>  cms_page


local.xml       =>  style6.xml      =>  default

Note: layout files are shown in the loaded order in Magento.

在这里，您可以看到最后加载了local.xml文件。但它使用处理程序style6.css添加default。请注意，加载到local.xml文件之上的其他一些布局文件也使用其他一些处理程序。这里layout3.xml和layout1.xml使用cms_page处理程序添加一些css文件。当然那些css文件只会在使用cms页面时加载。

假设我们加载了一个在其中使用cms页面的页面。示例是Magento的主页。所以布局的顺序处理

ORDER OF LAYOUT HANDLE INVOKES
----------------------------------
        default
        cms_page

Note: Ignores other layout handlers that are using to load 
      home page of magento for the sake of simplicity

由于这个原因，对于上面描述的场景，样式将以这种格式加载

ORDER OF STYLES LOADING
------------------------
style1.css
style3.css
style4.css

style6.css (style that we added through local.xml)

style2.css
style5.css

为什么这个订单

Magento首先考虑default处理程序。然后它将添加从布局文件中default处理程序下指定的css文件。布局文件将按其加载顺序进行处理。在加载了通过default处理程序添加的所有css文件之后，magento现在考虑cms_page处理程序并继续该过程。所以在我们的例子中，上面的css文件顺序将生成并将按顺序加载它们。

特定于此问题

此处似乎在您的css文件之后添加了styles.css。这通常不会发生。这是因为styles.css是通过page.xml文件和default处理程序添加的。所以它会在你的css文件加载之前加载。所以肯定会在你的情况下发生一些奇怪的事情。

Special NOte ：您不想使用此代码

 <action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>

在local.xml文件中。这够了

<?xml version="1.0"?>
<layout>
    <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <file>css/wc_styles.css</file>
        </action>
    </reference>
    </default>
</layout>

Answer 2

问题在于Magento在1.9中的RWD主题如何添加样式表：使用条件注释。

I = phantom(xxx);

事实证明，Magento首先插入没有条件注释的样式表。

所以，长话短说，克服这种情况的方法是使用“空”条件评论：

R = radon(I, theta);

Simon Sprankel在这里写了一篇关于这个具体问题的深入文章：http://www.coderblog.de/magento-1-9-infinite-theme-inheritance-child-css-not-rendered-last/

由父css覆盖的Magento自定义css - 使用local.xml

2 个答案:

为什么这个订单

特定于此问题