25

今日問題が発生した後、CSSクラスの優先順位について質問があります。状況は次のとおりです。

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

CSS：

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

4 に答える 4

26

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

.dynamicList li.selectedItem {
  background-color: #0000ff;
}
于 2009-07-13T15:35:11.167 に答える
17

簡単に言うと、前のスタイルの方が具体的で優先度が高いため、.selectedItemスタイルは適用されません。ここにまともな要約があります：

それでは、CSSの内部優先度の一般的なリストを作成しましょう（3が最高の優先度です）。

element
.class
#id

これがデフォルトの優先順位です。これに加えて、特異性もカウントされ、f.exulliはliをオーバーライドします。W3Cは、内部重量の計算方法について適切な表を作成しました。

LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */
#list         {...}  /* a=1 b=0 c=0 -> specificity = 100 */

そして、これがW3C仕様です。

于 2009-07-13T15:33:56.847 に答える
7

selectedItemルールを次のように変更します。

.dynamicList li.selectedItem
{
    background-color: #0000ff;
}
于 2009-07-13T15:36:56.327 に答える
2

cletusの投稿では言及されていない小さな追加。
リンクによるとW3C、最高の優先順位はstylehtml要素/タグで使用される属性です。

たとえば、

<a id= bar style="color: red">foo</a>

と

<style>
#bar {
    color: blue;
}
</style>

色はred、インラインhtmlスタイルの優先度が最も高く、より高いためになり#ます。

于 2013-08-09T07:34:34.500 に答える