如何在CSS

-1

定義類我有這樣的CSS：如何在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>

我想一個小號分爲兩組，正常的和大膽。我試過這個：

#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文件提供類？謝謝。

來源

2016-03-28 jason

使用點.classname – SnakeFoot

向我們展示你的HTML結構和樣品重現您的問題 –

@GopsAB我加我的HTML。謝謝。 – jason

你有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; 
}

來源

2016-03-28 08:49:26 ketan

等。無論您想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>

來源

2016-03-28 08:42:09

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

來源

2016-03-28 08:47:19 sagivasan

回答

相關問題