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

Question 1

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>

Question 2

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

Question 3

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 {}

Question 4

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

Question 5

.navigationLevel2 li { color: #aa0000 }

Question 6

Ich brauchte nur einen Drilldown bis zum letzten Punkt.

    #navigation li .navigationLevel2 li

Answer 1

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>

Answer 2

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

Answer 3

11