什么是资产管道的优先权

Question

资产管道的优先顺序

我想用ace.css

覆盖user.css.scss样式的部分内容

供应商文件夹中的样式表文件ace.css应由user.css.scss覆盖。

但它根本不起作用（假设我在 user.css.scss 之间包含 ace.css ，那就是我导入了用户.css 两次）

user.css.scss

div#user_bottom a.btn{
  color: red;
  background-color: #ffffff;
}

ace.css

.btn {
  display: inline-block;
  color: #FFF !important;
  background-image: none !important;
}    

布局文件

我试图把user.css.scss TWICE

一个在ace.css之前

和另一个在ace.css之后

= stylesheet_link_tag params[:controller]
%link{href: asset_path("ace-admin-theme/css/uncompressed/ace.css"), rel: "stylesheet"}/
= stylesheet_link_tag params[:controller]

haml

  %div#user_bottom
    %a.btn{class: "btn-#{button_color}",href: url }

结果

user.css.scss 仍会被ace.css覆盖

Answer 1

订购文件不是问题。

如果您有元素

<div id="user_bottom"><a class="btn">A</a></div>

最后使用的CSS选择器将更精确。因此div#user_bottom a.btn将在.btn之前使用，因为它更“精确”。

将您的ace.css第一行替换为

.btn, div#user_bottom a.btn {

更加“精确”，并在第一条规则之后定义。

http://www.w3.org/TR/CSS2/cascade.html说

  

要查找元素/属性组合的值，用户代理必须应用以下排序顺序：

     

查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配且目标媒体与包含声明的所有@media规则上的媒体列表以及到达样式表的路径上的所有链接匹配，则声明适用。   根据重要性（正常或重要）和来源（作者，用户或用户代理）进行排序。按升序排列：

     

  

• 用户代理声明

  

• 用户正常声明

  

• 作者正常声明

  

• 作者重要声明

  

• 用户重要声明

  

     

根据选择器的特异性对具有相同重要性和原点的规则进行排序：更具体的选择器将覆盖更一般的选择器。伪元素和伪类分别计为普通元素和类。

     

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。