cssがsafariに反映されない

Question

前提・実現したいこと

.news-categoryの背景をaquaに変えたいのですが、cssハックする前の色(#444444)になってしまいます。
色々試したのですが上手くいきません。
どうしたらいいでしょうか？

該当のソースコード

::-webkit-full-page-media,
:future,
:root .news-category {

  background-color: aqua;
}

.body {
...
}

...

.news-category {

            color: #FFFFFF;
            background-color: #444444;
            font-size: 12px;
            font-weight: bold;
            line-height: 3.2;
            padding: 7px 15px;
            margin: 0 34px 0 31px;
}

試したこと

下にあるコードの方が優先されるかなと思い、下記のようにしてみましたが変わりませんでした。

.news-category {

            color: #FFFFFF;
            background-color: #444444;
            font-size: 12px;
            font-weight: bold;
            line-height: 3.2;
            padding: 7px 15px;
            margin: 0 34px 0 31px;
}

::-webkit-full-page-media,
:future,
:root .news-category {

  background-color: aqua;
}

補足情報

下記をbodyより上に書くと、それは反映されました。

::-webkit-full-page-media,
:future,
:root .moredetail-copy {
  font-size: 15px;

  @include lbsp {
    font-size: 12px;
  }
}

Answer 1

CSSハック使わずに普通のメディアクエリの中に書くとできました。