CSS - Syntax zum Auswählen einer Klasse innerhalb einer ID

75

Wie lautet die Selektorsyntax, um ein Tag innerhalb einer ID über den Klassennamen auszuwählen? Was muss ich zum Beispiel unten auswählen, damit das innere "li" rot wird?

<html>
<head>
    <style type="text/css">
        #navigation li
        {
            color: green;
        }

        #navigation li .navigationLevel2
        {
            color: red;
        }
    </style>
</head>
<body>
    <ul id="navigation">
        <li>Level 1 item
            <ul class="navigationLevel2">
                <li>Level 2 item</li>
            </ul>
        </li>
    </ul>
</body>
</html>

css css-selectors

— Jeremy
quelle

91

#navigation .navigationLevel2 li
{
    color: #f00;
}

— John Sheehan
quelle

11

Nur wenn das gezeigte Beispiel das gesamte Markup ist. Nach allem, was Sie wissen, ist das erforderliche Markup komplizierter. Ich habe meine Antwort auf die gegebenen Informationen gestützt.

— John Sheehan

Es funktioniert nicht für mich. Ich versuche, .class1-1- Klassen innerhalb der # container-1- ID auszuwählen, indem ich # container-1 .class1-1 {Styles} verwende, aber es funktioniert nicht. Ich inspiziere Elemente und sehe, dass die Stile überhaupt nicht zugewiesen werden.

— Omar

6

Dies funktioniert auch und Sie benötigen keine zusätzliche Klasse:

#navigation li li {}

Wenn Sie eine dritte Stufe von LIs haben, müssen Sie möglicherweise einige der Stile zurücksetzen / überschreiben, die sie vom obigen Selektor erben. Sie können die dritte Ebene wie folgt anvisieren:

#navigation li li li {}

— Andy Ford
quelle

2

Hier sind zwei Optionen. Ich bevorzuge die Option navigationAlt, da sie am Ende weniger Arbeit erfordert:

<html>

<head>
  <style type="text/css">
    #navigation li {
      color: green;
    }
    #navigation li .navigationLevel2 {
      color: red;
    }
    #navigationAlt {
      color: green;
    }
    #navigationAlt ul {
      color: red;
    }
  </style>
</head>

<body>
  <ul id="navigation">
    <li>Level 1 item
      <ul>
        <li class="navigationLevel2">Level 2 item</li>
      </ul>
    </li>
  </ul>
  <ul id="navigationAlt">
    <li>Level 1 item
      <ul>
        <li>Level 2 item</li>
      </ul>
    </li>
  </ul>
</body>

</html>

Erweitern Sie das Snippet

— Jason
quelle

1

.navigationLevel2 li { color: #aa0000 }

— Galen
quelle

WENN dies den Trick macht, ohne es auf unerwünschte Li: s anzuwenden, dann ist dies der richtige Weg, da es weniger Selektoren hat und somit schneller ist. Zumindest gemäß den Empfehlungen zur Seitenleistung von Google.

— PatrikAkerstrand

0

Ich brauchte nur einen Drilldown bis zum letzten Punkt.

    #navigation li .navigationLevel2 li

— kkrobbins
quelle