CSSセレクタを入れ子にできないのは何故？

/*----ナビゲーション----*/
#nav {
}
    #nav ul {
    }
        #nav ul li {
        }
            #nav ul li a,
            #nav ul li a:visited {
            }
            #nav ul li a:hover {
            }
/*----ナビゲーション END----*/

遠い昔に思っていたことなんだけども、↓のように入れ子で書けないのは何故なんだろう？親のセレクタを前置すればいいだけだから、シンタックスシュガーとして実装できそうな気がするのだけども。

/*----ナビゲーション----*/
#nav {
    ul {
        li {
            a,
            a:visited {
            }
            a:hover {
            }
        }
    }
}
/*----ナビゲーション END----*/

何かまずいことでもあるのかな？例えば↓のように書いたとき、

#nav {
  color: red;
    ul {
    }
}

ulがcolor: redを継承してるように見えてしまうからダメ・・・とか？