Prioritäten der CSS-Klassen

Question

Ich habe eine Frage zur Priorität von CSS-Klassen, nachdem ich heute auf ein Problem gestoßen bin. Die Situation ist wie folgt:

Ich habe eine unsortierte Liste, der eine Klasse zugeordnet ist. Die LI Tags haben auch einige Stile definiert. Ich möchte das Styling des Tags LI s nach einem Klick (über ein hinzugefügtes "selected" Klasse), aber die Stile der hinzugefügten Klasse werden nie angewendet. Ist dieses Verhalten normal oder sollte dieser Code funktionieren?

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>

Die Hintergrundfarbe des "selected" Listenelement wird nicht geändert. Dies ist auch der Fall, wenn ich den Stil nicht auf den LI Element, sondern erstellen Sie eine andere Klasse und wenden Sie diese auf alle Listenelemente an, damit sie gelesen wird.

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

Answer 1

Das klingt wie ein CSS-Spezifität Problem. Versuchen Sie, Ihre .selectedItem Regelsatz zu:

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

Answer 2

Die kurze Antwort ist, dass Ihr .selectedItem-Stil nicht angewendet wird, weil der vorherige Stil spezifischer ist und daher eine höhere Priorität hat. Hier ist eine anständiger Überblick :

Lassen Sie uns nun eine allgemeine Liste der internen Prioritäten für CSS (3 hat die höchste Priorität):

element
.class
#id

Dies ist die Standard-Prioritätenfolge. Unter Darüber hinaus wird die Spezifität auch zählen, z.B. hat ul li Vorrang vor li. Das W3C hat eine anständige Tabelle erstellt über wie Sie die interne Gewichtung berechnen sollten Gewicht:

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 */

Und hier ist die W3C-Spezifikation .

Answer 3

Ändern Sie die selectedItem Regel zu:

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

Answer 4

Eine kleine Ergänzung, die im Beitrag von cletus nicht erwähnt wurde.
Nach Angaben der W3C Verbindung, die höchste Priorität hat die style Attribut, das in dem html-Element/Tag verwendet wird.

Wenn Sie z. B. Folgendes haben

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

et

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

Die Farbe wird sein red weil der Inline-HTML-Stil die höchste Priorität hat, höher als # .