title: how to use querySelector to select dynamic added elements
body: <p>I have a dom like this:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;&lt;a&gt;test&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a&gt;test&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a&gt;test&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a&gt;test&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the <code>&lt;li&gt;</code> element are added to the html dynamically so that I cannot add id to it. 
  And I'm using css selector to select the <code>&lt;li&gt;</code> element by using:</p>
  
  <pre><code>document.querySelector("li:nth-child(1)")
  </code></pre>
  
  <p>But how can I select the <code>&lt;a&gt;</code> element inside the <code>&lt;li&gt;</code>? Can I do a querySelector inside anther querySelector? Or there's some better ways to do it? Thanks.</p>