javascript - 浏览器如何管理样式加载顺序优先级？

Question

我正在做一个 Symfony2 元素，我在主布局上定义了一个名为 {% block styles %} 的 block 。这个 block 是我添加一些额外样式的地方，如果有任何包需要的话。那很好用。现在捆绑在一起，我有这个:

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/plantilla/components/fuelux/dist/css/fuelux.min.css') }}"/>
    <style type="text/css">
        .fuelux .wizard > .actions a {
            font-size: 0 !important;
            line-height: 0 !important;
            margin-right: 0 !important;
        }
    </style>
{% endblock styles %}

浏览器不应该按照它们出现的顺序加载样式吗？如果是这样，那我为什么会遇到这个问题:

来自 Firebug HTML 选项卡的信息 > 样式:加载顺序完全错误

来自 Firebug HTML 选项卡的信息:加载顺序似乎不错

作为这个问题的第二部分，我还有一个疑问，是否存在一种简单的方法来覆盖整个 CSS 选择器属性而不需要一个一个地覆盖？请注意第一张附图中我在做什么；我正在重写 .fuelux .wizard > .actions a 属性，所以有没有简单的方法来获得这个或者必须一个一个地获取？

编辑:添加测试

好吧，一开始我也是一头雾水，现在简单测试了一下，结果如下:

使用样式，同时应用:

没有样式(注意我在 Firebug 中全部删除):

所以我将通过以下方式重写答案:

什么是覆盖样式的正确方法以将它们移除？是否存在一种覆盖整个 CSS 选择器属性而无需逐一覆盖的简单方法？请注意第一张附图中我在做什么；我正在重写 .fuelux .wizard > .actions a 属性，所以有没有简单的方法来获得这个或者必须一个一个地获取？

PS: 在对主题投反对票或投票之前，我必须说我设置了 javascript 和 jquery 标签，因为也许有一种方法可以使用用于覆盖整个 CSS 选择器属性而不仅仅是 CSS 的 Javascript

Answer 1

内联样式在所有 CSS 中具有最高优先级。通常，它建议您避免使用它们，但如果您在遗留系统上工作或无法直接访问 HTML 代码，则可能没有那么奢侈。

幸运的是，除了基于 JS 的解决方案之外，还有一种仅使用 CSS 的方法来覆盖内联样式:

.fuelux .wizard > .actions a[style] {
        font-size: 0 !important;
        line-height: 0 !important;
        margin-right: 0 !important;
    }

此方法适用于所有主流浏览器(IE 6 和 7 除外)，包括:

• Internet 浏览器 8.0
• Mozilla Firefox 2 和 3
• 歌剧 9
• 苹果浏览器
• 谷歌浏览器

编辑添加: 看起来它毕竟不是关于覆盖内联 CSS，因为您的内联样式正在呈现，您只是在某处有语法错误。