Как определить класс в CSS

Question

У меня есть этот CSS:

#cssmenu { 
    background: #333; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 12em; 
} 
#cssmenu a { 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: normal; 
} 

Вот мой HTML:

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='#'><span>Home</span></a></li> 
    <li class='normal'><a href='#'><span>Products</span></a></li> 
    <li class='bold'><a href='#'><span>Company</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

Я хочу разделить S на две группы, нормальные и смелыми. Я пробовал:

#cssmenu a.normal { 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: normal; 
} 
#cssmenu a.bold{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: bold; 
} 

Но это не помогло. Как я могу правильно присвоить классы для этого файла CSS? Благодарю.

Answer 1

Вы bold и normal класс li не a.

Изменения CSS, как:

#cssmenu li.normal a{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: normal; 
} 
#cssmenu li.bold a{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: bold; 
} 

Fiddle

Или

#cssmenu li.normal span{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: normal; 
} 
#cssmenu li.bold span{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight: bold; 
} 

Answer 2

Где бы вы хотели bold добавить класс #cssmenu a

.bold{ 
    font-weight: bold; 
} 

Где бы вы хотели normal, удалить bold class

#cssmenu li.normal span{ 
 
    background: #333; 
 
    border-bottom: 1px solid #393939; 
 
    color: #ccc; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 8px 1px; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
} 
 
#cssmenu li.bold span{ 
 
    background: #333; 
 
    border-bottom: 1px solid #393939; 
 
    color: #ccc; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 8px 1px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
}

<div id='cssmenu'> 
 
<ul> 
 
    <li class='active'><a href='#'><span>Home</span></a></li> 
 
    <li class='normal'><a href='#'><span>Products</span></a></li> 
 
    <li class='bold'><a href='#'><span>Company</span></a></li> 
 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
 
</ul> 
 
</div>

Answer 3

CSS

#cssmenu a{ 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #ccc; 
    display: block; 
    margin: 0; 
    padding: 8px 1px; 
    text-decoration: none; 
    font-weight : normal; 
} 

#cssmenu a.bold{ 
    font-weight: bold; 
} 

HTML

<div id="cssmenu"> 
<a class="bold"/> 
</div