css小问题

<div class="nav1">
                <ul>
                    <li class="active"><a href="news.html">a</a></li>
                    <li><a href="news.html">b</a></li>
                    <li><a href="products.html">c</a></li>
                    <li><a href="praise.html">d</a></li>
                    <li><a href="media.html">e</a></li>
                </ul>

            </div>

.nav1 li a{
    color: #555;
}

.active a{
    color: red;
}

这样写
•a
“a”不是红色，在后面加上！important后才是，请教问题出在哪里，继承的优先级？