代码之家  ›  专栏  ›  技术社区  ›  ChrisW

CSS中规则的顺序或顺序是否重要?

css
  •  7
  • ChrisW  · 技术社区  · 16 年前

    CSS中规则的顺序或顺序是否重要?

    这篇文章说这很重要: Order of CSS rules matters!!!!!!!!!!

    我在CSS规范中没有注意到这方面的任何内容。

    应该 Calculating a selector's specificity 假设当且仅当两个规则具有相同的特殊性,则两个规则中的较晚者(即,在前一个规则之后定义的规则)才是有效规则?

    5 回复  |  直到 16 年前
        1
  •  10
  •   Jason C    16 年前

    秩序确实重要。如果特异性相等,则稍后声明的规则获胜。看见 Cascading Order

    …最后,按指定的顺序排序:如果两个声明具有相同的权重、来源和特定性,则后一个声明将获胜。导入的样式表中的声明被视为在样式表本身中的任何声明之前。

        2
  •  5
  •   Philippe Leybaert    16 年前

    你的假设是正确的。以后定义的CSS规则将覆盖以前的定义,除非该规则没有以前的定义那么具体。

        3
  •  3
  •   Sergio    16 年前

    如果在同一css文件上有两个冲突规则,则以最后一个规则为准。

        4
  •  3
  •   Greg    16 年前

    如果您在发布的规范页面上向上滚动一点,您可以 this :

    6.4.1级联顺序

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

    1. 查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配,且目标介质与包含声明的所有@media规则上的介质列表以及到达样式表的路径上的所有链接上的介质列表匹配,则声明适用。
    2. 根据重要性(正常或重要)和来源(作者、用户或用户代理)排序。按优先顺序升序:
      1. 用户正常声明
      2. 作者正常声明
      3. 用户重要声明
    3. 按选择器的特定性对具有相同重要性和来源的规则进行排序:更特定的选择器将覆盖更一般的选择器。伪元素和伪类分别计为普通元素和类。
    4. 最后,按指定的顺序排序:如果两个声明具有相同的权重、来源和特定性,则后一个声明将获胜。导入的样式表中的声明被视为在样式表本身中的任何声明之前。
        5
  •  2
  •   NickFitz    16 年前

    6.4.1 Cascading order . 它比顺序稍微复杂一些,因为还需要考虑诸如“!important”和用户与作者之间的规则。特异性和级联效应共同作用。