CSS の記述内容は、下記の流れで書かれていますが、

dd {
  padding: 8px;
  margin: 0;
  display: none;
}

dl > div.appear dd {
  display: block;
}

この順序を下記のように逆にしても動作するのはなぜですか。

dl > div.appear dd {
  display: block;
}

dd {
  padding: 8px;
  margin: 0;
  display: none;
}

コードは上から順に見ていくと思いますので、
dd 要素の display は、あとの none が有効となり、
動作しない（展開しない・非表示のまま）と思ったのですが、
予想に反して展開されました。どうしてでしょうか。