Question

I'm new at HTML and CSS, and I doing my first project and already facing a problem.

Well I've created an ID named sidebar so I can have an sub-menu at the left side of the page, and a class named selected which would idenify the actual selected sub menu.

<div id="sidebar">
    <h2>Sub Menu</h2>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#" class="selected">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">F</a></li>
    </ul>
</div>

Then at my css "style.css"

#sidebar {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0 1em 0 1em;
}
            /*SIDE MENU*/
#sidebar ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
#sidebar ul li { 
    display: inline;
    padding: 0;
    margin: 0;
}
#sidebar ul li a {
    display: block;
    color: #385900;
    background: inherit;
    text-decoration: none;
    margin: 0;
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #C0C0C0;
}
#sidebar ul li a:hover {
    text-decoration: none;
    background: #E6E7E9;
    color: #DA7910;
}

This works fine and did what I need;

The problem occurs when I try to change Color and Background-color of the selected sub menu. The .selectd class isn't able to apply the color change over the #sidebar ID, only Font-weight and font-size worked as I expected.

.selected {
    color:white;
    background-color:#385900;
    font-weight:bold;
}

What am I doing wrong? what is missing me?

Thanks in advance!

Answer 1

现在是时候学习一个名为Specificity的CSS的高级主题了。

而不仅仅.selected使用#sidebar ul li a.selected来增加CSS选择器的特异性。

无法更改<a> color and background color of an ID (#sidebar) with a class (.selected)

1 个答案: