firefox如何决定使用哪个@ -moz文档规则?

时间:2014-07-23 20:33:00

标签: css firefox

我为在Fedora 19上运行的Firefox 26创建了一个自定义userContent.css文件。

我试图找出@ -moz文档规则的优先顺序。

我想要做的是为社区页面制定一套规则,并为网站上所有其他页面制定规则。

我试过......

@-moz-document   
    url-prefix(https://discussions.apple.com/community/) 
{/* rules for this page */}


@-moz-document  
    domain(discussions.apple.com) 
{ /* different rules  for all other pages in domain. */}

我发现我的url-prefix规则被忽略了。

2 个答案:

答案 0 :(得分:2)

如果你在两个规则中都有相同的属性,那么后者将覆盖前者,因为当所有的东西被认为是相等的时候CSS应用规则从上到下,所以https://discussions.apple.com/community/也匹配discussion.apple。 com后面的规则将适用,如果你想要你可以交换订单,这应该有帮助。

答案 1 :(得分:0)

/*

  Where to place a new css tag?

  Find the conditional code, "the if statements".
  The conditional code starts with @.     

  In some ways, you can think that all the css rules 
  are applied that in parallel. 

  In the case you add a new rule with with an attribute that you haven't used
  before, the rule can be place anywhere in the conditional block that applies.  
  In case of conflicting attributes, the last 
  seen attribute is used.  

*/

/* if the domain of the web page is any of these,
    apply the css below, between the matching {}. */
@-moz-document  
  domain(discussions.apple.com),
  domain(communities.apple.com),
  domain(discussionsjapan.apple.com),  
  domain(discussionskorea.apple.com)  
{  

   ... lots of css ...

   /* for pages from all devices and the width of the page
       is larger than 1265px, apply the css. 
       Remember, we are inside of the @-moz-document conditional. 
       So the @media rule, only see pages that of passed @-moz-document 
       conditional. */
   @media all and (min-width: 1265px) 
   {   
     /* styles for a large browser window  */

     ... lots of css ...

   }

   /* for pages from all devices and the width of the page
      is less than or equal to 1265px, apply the css. */
   @media all and (max-width: 1265px) 
   {                                             
      /* styles for narrow browsers window  */

       ... lots of css ...

    }  

} /* end of @-moz-document */ 


/* another conditional.  The style rules will be applied
   to any page with an URL starting with. Note, this 
   @-moz-document rules is applied separately from the 
   prior @-moz-document conditional. */
@-moz-document  
  url-prefix(https://discussions.apple.com/people/),
  url-prefix(https://discussions.apple.com/welcome),
  url-prefix(https://discussionsjapan.apple.com/people/),  
  url-prefix(https://discussionsjapan.apple.com/welcome/),
  url-prefix(https://discussionskorea.apple.com/people/),
  url-prefix(https://discussionskorea.apple.com/welcome/)    
    {
      /* These rules get applied on the pages that match. 
         Remember, the last setting of the attribute wins. */
      ... lots of css ...
    }  /* end of @-moz-document */