CSS selector not changing link color

Question

My html and css files are set up correctly, however I'm having trouble with a certain selector.

I have the html here:

<span id="bottom_nav_bar"> 
    <a href="#">Link 1</a>
</span>

And the CSS here:

a#bottom_nav_bar{ color: red; text-align: center; }

However, my span is not getting selected and I can't figure out why. Any ideas?

Answer 1

It should instead be:

#bottom_bar_nav a {
    color: red;
    text-align: center;
}

As the <a> is a descendant of the <span> with the ID bottom_nav_bar

Answer 2

You're not targeting the a element. Your CSS selector is attempting to style an a element with an id of "bottom_nav_bar". In your HTML, however, the span has this ID and the anchor element is within the span.

To target the anchor tag, change your CSS selector to:

#bottom_nav_bar a { color: red; text-align: center; }

To target just the span, change a#bottom_nav_bar to span#bottom_nav_bar .

For more information about selectors, please see http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

尝试这个：

#bottom_nav_bar a{ color: red; text-align: center; }

Answer 4

使用它来选择跨度链接

span #bottom_nav_bar a{ color: red; text-align: center; }

Answer 5

Your link don't have this id, so it can't work...

Put your id to the a-tag ;)