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

Question

我正在研究Symfony2项目，并在主布局上定义了一个名为{% block styles %}的块。如果任何捆绑需要它，我会添加一些额外的样式。这很好用。现在捆绑在一起我就是这个：

{% 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标签的信息＆gt;风格：加载顺序完全错误

来自Firebug HTML标签的信息：加载顺序似乎很好

作为这个问题的第二部分，我有另一个疑问，是否存在一种简单的方法来覆盖整个CSS选择器属性而无需逐个覆盖？请注意第一张附图中我正在做的事情;我正在覆盖.fuelux .wizard > .actions a属性，所以任何简单的方法来获得这个或必然是一个接一个的？

编辑：添加测试

好的，起初我很困惑，现在我做了一个简单的测试，看到下面的结果：

使用样式：

没有样式（注意我在Firebug中删除了所有内容）：

所以我会改写答案：

什么是覆盖样式以便将它们取出的正确方法？存在一种简单的方法来覆盖整个CSS选择器属性而无需逐个覆盖？请注意第一张附图中我正在做的事情;我正在覆盖.fuelux .wizard > .actions a属性，所以任何简单的方法来获得这个或必然是一个接一个的？

PS：在关闭主题或投票结束主题之前，我必须说我设置了javascript和jquery标签，因为可能有一种方法使用Javascript来覆盖整个CSS选择器属性而不仅仅是CSS

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 Explorer 8.0
• Mozilla Firefox 2和3
• Opera 9
• Apple Safari，
• Google Chrome

编辑添加：看起来它不是要覆盖内联CSS，因为你的内联样式正在呈现，你只是在某处出现语法错误。

Answer 2

基于讨论，OP希望重新应用bootstrap中的一组样式值，这些样式值被fuelux覆盖。据我所知，因为fuelux有更具体的规则，唯一的选择是自己创建规则并应用样式你想要的价值

.fuelux .wizard > .actions a.btn {
    line-height: 1.42857143;
    margin-right: 0;
    font-size: 14px;
}

演示：Fiddle