CSS：子類不工作

我有了這個HTML元素：CSS：子類不工作

<span class="item-menu-notif non-lue" onclick="dosomething(2150)"> 
TEXT 
</span>

這裏的CSS類：

.item-menu-notif{ 
    display: block; 
    cursor: pointer; 
    padding: 0 0.4em 0 0.4em; 
} 

span.item-menu-notif:hover{ 
    background: #aaaaaa; 
} 

span.item-menu-notif .non-lue{ 
    font-weight: bold; 
}

我的問題是，non-lue類沒有使用。在螢火蟲中，我可以看到班級沒有出現在我的span元素上。

我不明白爲什麼。我嘗試過和沒有span選擇器在我的CSS。這是一樣的結果。

來源

2015-10-08 user3469203

這是因爲

span.item-menu-notif .non-lue{ font-weight: bold; }

它告訴瀏覽器，「給我找一個元素與類」 .non- '藍色」是與類名span元素‘項目菜單，通知符’」。

針對你的情況，你想要一個span元素是一個「項目菜單，通知符」和「非'藍色」你應該提供的類名稱指定一個更明確的規則的元素，像在它們之間沒有空白（與選擇器之間的空白字符，假設最右邊的是左側選擇器的descentant）。

請檢查這些鏈接，希望他們會幫助你：第一個是關於選擇器和第二個&關於特殊性規則。

1）http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

2）https://css-tricks.com/specifics-on-css-specificity/

3）https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

當然是正確的答案是：

span.item-menu-notif.non-lue{ font-weight: bold; }

來源

2015-10-08 10:22:01 gdyrrahitis

的選擇之間刪除空格：

span.item-menu-notif.non-lue

，如果你想針對誰是後代的元素，您只使用空間。但既然你想要的目標與這兩個類的元素，你必須刪除它們之間的空間。

來源

2015-10-08 10:05:33 Dygestor

謝謝Dygestor – user3469203

你應該這樣做

span.item-menu-notif.non-lue{ 
    font-weight: bold; 
}

來源

2015-10-08 10:05:35

這個選擇器說，和一個元件類的跨度內。非略將被稱呼代替跨度的Elemen，噸。

span.item-menu-notif .non-lue{ font-weight: bold; }

刪除的空間，它會從說的跨度內。非略與.item菜單，通知符和。非略跨去。

span.item-menu-notif.non-lue{ font-weight: bold; }

來源

2015-10-08 10:22:05

CSS：子類不工作

回答

相關問題