title: How do I get this CSS text-decoration override to work?
body: <p>Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>ul &gt; li {
      text-decoration: none;
  }
  ul &gt; li.u {
      text-decoration: underline;
  }
  ul &gt; li &gt; ul &gt; li {
      text-decoration: none;
  }
  ul &gt; li &gt; ul &gt; li.u {
      text-decoration: underline;
  }
  </code></pre>
  
  <p>And my HTML looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;Should not be underlined&lt;/li&gt;
    &lt;li class="u"&gt;Should be underlined
      &lt;ul&gt;
        &lt;li&gt;Should not be underlined&lt;/li&gt;
        &lt;li class="u"&gt;Should be underlined&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Yet it comes up like this:</p>
  
  <p><img src="https://imgur.com/MBXIo.gif" alt="Image"></p>