☰

CSS クラスの優先順位 質問する

tag-icon • tag-icon css list class css-specificity
CSS クラスの優先順位 質問する

本日問題が発生したため、CSS クラスの優先度について質問があります。状況は以下のとおりです。

クラスが関連付けられている順序なしリストがあります。タグにもいくつかのスタイルが定義されています。クリック後に (追加されたクラスを介して)LIのスタイルを変更したいのですが、追加されたクラスのスタイルが適用されません。これは通常の動作ですか、それともこのコードは機能するはずですか?LI"selected"

CS: ...

.dynamicList
{
    list-style: none;
}

.dynamicList li
{
    display: block;
    width: 400px;
    height: 55px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    background-color: #ff0000;
}

.selectedItem
{
    background-color: #0000ff;
}

HTML:

<ul class="dynamicList">
  <li>First Item</li>
  <li class="selectedItem">Second (Selected) Item</li>
</ul>

リスト項目の背景色は変更されません。要素にスタイルを適用せず、別のクラスを作成してそれをすべてのリスト項目に適用した"selected"場合も同様です。LI

<li class="listitem selectedItem">xxxx</li>

ベストアンサー1

これはCSS の特異性問題。.selectedItemルールセットを次のように変更してみてください。

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

おすすめ記事