Ziel ist die erste Ebene der <li>s und nicht die verschachtelten <li>s

Question

Ich habe das folgende HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

Wie kann ich mit jQuery die ERSTE Ebene der <li> s?

Ich muss zum Beispiel die Schrift fett machen, wenn ich den Mauszeiger auf die <li> s mit den Buchstaben A, B und C, aber NICHT diesen Schriftstil auf die verschachtelten <li> s (mit dem Namen Unterabschnitte ).

Hier ist ein erstes jsfiddle DEMO wenn Sie es verwenden möchten.

Danke.

EDIT -

Lösung:

UNTERGEORDNETE SELEKTOREN so lautet die Antwort.

jQuery ist nicht erforderlich, dies kann mit CSS geschehen.

Hier ist die aktualisierte DEMO

EDIT - Hier ist ein übersichtlichere Demo

Danke,

Answer 1

Hier ist eine erweiterte Version der Antwort von Benutzer @Spudley - mit einem Ausschnitt.

Das könnte einigen Leuten etwas Zeit sparen.

/* this will affect all levels of li */
.myclass ul li {
  color: red;
}

/* this will only affect level 1 */
.myclass>ul>li {
  color: green;
}

/* this will only affect level 2 */
.myclass>ul>li>ul>li {
  color: blue;
}

/* this will only affect level 3 */
.myclass>ul>li>ul>li>ul>li {
  color: aqua;
}

* {
  font-family: arial;
}

<div class="myclass">
  <ul>
    <li>Level 1
      <ul>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
          </ul>
        </li>
        <li>Level 2</li>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
            <li>Level 3
              <ul>
                <li>Level 4</li>
                <li>Level 4</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Level 1</li>
  </ul>
</div>