web-dev-qa-db-ja.com

特定のliクラスにCSSを適用する

リストに問題があります。

li要素ごとに特定の色を指定したいのですが、指定できないようです。それは彼ら全員のためにそれをし続けます。

ここに私のCSSがあります：

#sub-nav-container ul
{
    position: absolute;
    top: 96px;
    left: 594px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sub-nav-container li 
{
    margin: 0;
}

#sub-nav-container a
{
    display: block;
    text-decoration: none;
    border-bottom: none;
    color: #C1C1C1;
    display: inline;         
}

li.sub-navigation-home-news  
{
    color: #C1C1C1;
    font-family: Arial;
    font-size: 13.5px;
    text-align: center;
    text-transform: uppercase;
    padding: 0px 90px 0px 0px; 
}

これがHTMLです

<div id="sub-nav-container">
    <ul id="sub-navigation-home">
        <li class="sub-navigation-home-news"><a href="#">News</a></li>
        <li class="sub-navigation-home-careers"><a href="#">Careers</a></li>
        <li class="sub-navigation-home-client"><a href="#">Client Login</a></li>
        <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li>
        <li class="sub-navigation-home-usa"><a href="#">USA</a></li>
    </ul>
</div>
htmlcsshtml-lists
6
Rizwan

<a>そこにあり、IDを使用していません

それを次のように変更します。

#sub-navigation-home li.sub-navigation-home-news a 
{
 color: #C1C1C1;
 font-family: arial;
 font-size: 13.5px;
 text-align: center;
 text-transform:uppercase;
 padding: 0px 90px 0px 0px; 
}

そしてそれはおそらくうまくいくでしょう

12
fijter

あなたが持っているCSSは、色＃c1c1c1をすべての<a>要素に適用します。

また、色＃c1c1c1を最初の<li>要素に適用します。

他の色が定義されていないので、投稿したコードに何か欠けている可能性があります。

1
Sparky

Cssファイルでさらに定義します。の代わりに

li.sub-navigation-home-news

試す

#sub-navigation-home li.sub-navigation-home-news

詳細については、これを確認してください： http://www.w3.org/TR/CSS2/cascade.html#cascade

0
Jeff Sheldon

（2つの異なる場所で指定したとしても）指定されている色は1つだけです。スタイルルールの一部を省略したか、単に別の色を指定していません。

0
kinakuta

すべてのa要素のcolor: #C1C1C1;を#sub-nav-container aで定義しています。

a要素の親であるため、li.sub-navigation-home-newsで再度実行しても何も起こりません。

0
Niklas

Li要素に異なる色を指定しましたが、li内のaで指定された色によってオーバーライドされています。色を削除：＃C1C1C1;要素からのスタイルとそれは動作するはずです。

0
Dipil