列表的文字颜色不变

Question

Text color of list is not changing. I'm not sure why. I made the links a class nav and tried to style that with CSS but it doesn't seem to take effect.

HTML:

<ul>
    <li><a href="####" class="nav">info</a></li>
    <li><a href="###"  class="nav">facebook</a></li>
</ul>

CSS:

ul {
    padding-top: 6%;
    right: 9%;
    position: absolute;
    cursor: pointer;
    list-style: none;
}

a .nav {
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B !important;
}

Answer 1

a .nav needs to be a.nav .

a .nav looks for any element with the class nav that is a descendant of an anchor. a.nav selects anchors that have the class nav.

jsFiddle example

Also, whenever possible, try to avoid using !important .

Answer 2

Your element selector a .nav had space, change it to :

a.nav {
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B;
}

or like this one :

.nav a{
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B !important;
}