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です：私は通常と大胆な二つのグループに Sを分割したい

<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> 

。私はこれを試した：

#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

。

よう

変更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あなたがnormalをしたいWhereever

.bold{ 
    font-weight: bold; 
} 

にクラスを追加、削除したいWhereever 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

あなたは liない aの boldと normalクラスを持っている3210

#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