Wie definieren Klasse in CSS

Question

Ich habe diese 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; 
} 

Hier ist mein 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> 

I ein s auf zwei Gruppen, normal und fett teilen möchten. Ich habe das versucht:

#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; 
} 

Aber das hat nicht funktioniert. Wie kann ich Klassen für diese CSS-Datei korrekt angeben? Vielen Dank.

Answer 1

Sie haben bold und normal Klasse von li nicht a.

ändern css wie:

#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

Oder

#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

Wo auch immer Sie wollen bold eine Klasse #cssmenu a hinzufügen

.bold{ 
    font-weight: bold; 
} 

Überall dort, wo Sie normal möchten, entfernen Sie 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