web-dev-qa-db-ja.com

クラスでのCSS変更リスト項目の背景色

あるリストアイテムの背景色を変更しようとしていますが、他のリストアイテムには別の背景色があります。

これは私が持っているものです：

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   
<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

これが生成するのは、「選択された」クラスが存在しないかのように、（「nav」クラスからの）青い背景を持つすべてのリスト項目です。ただし、「nav」クラスから背景色を取り出すと、「selected」クラスのリストアイテムの背景色が赤になります。

ページ上の他のアイテム（つまり、他のリストアイテム、divなど）に「選択」クラスを使用したいと思います。

これをどのように解決しますか？

前もって感謝します。

csscolorsbackgroundhtml-lists
11
user614972

これは selector specificity の問題です。 （セレクター.selectedはul.nav liよりもless固有です。）

修正するには、オーバーライドルールで元のルールと同じだけの特異性を使用します。

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

他の.navがない場合は、ulをnixすることも検討してください。そう：

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

それは少しきれいで、タイピングが少なく、ビットが少ないです。

16
D_N

Ul.nav liはより制限的であるため、優先されます。これを試してください。

ul.nav li.selected {  
  background-color:red; 
}
2
Fernando Diaz Garrido

ライブデモ

ユーザーが表示しているページに応じてこれを強調表示する場合は、次のようにします。

現在のナビゲーションを自動的に強調表示するには、まず、ページが含まれているサイトのセクション（通常はディレクトリ）に一致するIDまたはクラスでbodyタグにラベルを付けます。

<body class="ab">

「/ about /」ディレクトリ内のすべてのファイルに「ab」クラスのラベルを付けます。ここでクラスを使用して、bodyタグにラベルを付けることに注意してください。一部の古いブラウザでは、本文にIDを使用しても一貫して機能しないことがわかりました。次に、メニュー項目にラベルを付けて、個別にターゲット設定できるようにします。

<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>

「b」uttonクラスを使用してメニュー項目をボタンとしてラベル付けし、ID（「ab」）を使用して一意の各メニュー項目（この場合約）をラベル付けすることに注意してください。ここで必要なのは、次のようにボディラベルと適切なメニューラベルを一致させるCSSセレクターです。

body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}

このコードは、「About」メニュー項目を効果的に強調表示し、濃い灰色で表示します。サイトの残りの部分とメニュー項目にラベルを付けると、次のようなグループ化されたセレクターになります。

body.hm #n #hm, body.hm #n #hm a,
body.sm #n #sm, body.sm #n #sm a,
body.is #n #is, body.is #n #is a,
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct
a{color:#333;background:#dcdcdc;text-decoration:none;}

たとえば、ユーザーがサイトマップセクションに移動すると、.smクラスのbodyタグは#smメニューオプションに一致し、ナビゲーションバーの「サイトマップ」のCSSハイライトをトリガーします。

ソース

1
Myles Gray

シナリオ：このようなナビゲーションメニューがあります。注：リンク<a> is child of list item <li>。選択したリストアイテムの背景を変更し、選択していないリストアイテムの背景色を削除したかった。

<nav>
        <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
        </ul>
        <div class="clear"></div>

       </nav>

JQueryを使用してリストアイテムにクラス.activeを追加しようとしましたが、機能していませんでした

.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });

解決策：基本的に、リスト項目の背景色を変更する.activeクラスを使用しても機能しません。そこで、cssクラス名を.activeから「nav li.active a」に変更し、同じjavascriptを使用して、選択したリスト項目に.activeクラスを追加します。リストアイテム<li>は.activeクラスを持ち、cssはそのリスト項目の子の背景色を変更します<a>.

nav li.active a
{
    background-color: #480048;
}
1
Goldfish

1）次のように、!importantルールを使用できます。

.selected
{
  background-color:red !important;
}

詳細については、 http://www.w3.org/TR/CSS2/cascade.html#important-rules を参照してください。

2）あなたの例では、単にul.nav li.selectedの代わりに.selectedを使用して赤い背景を取得することもできます。これにより、セレクターがより具体的になります。

詳細については、 http://www.w3.org/TR/CSS2/cascade.html#specificity を参照してください。

0
DigitalDan