CSS: override a property in li style residing within a class
<p>Consider these lines of codes:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dd class="flt-block-content "&gt;
  &lt;ol&gt;
    &lt;li style="width: 50%;"&gt;
      &lt;a href="ref"&gt;abc&lt;/a&gt;
      &lt;span class="count-wrapper"&gt;(6)&lt;/span&gt;
    &lt;/li&gt;
    &lt;li style="width: 50%;"&gt;
      &lt;a href="ref"&gt;def&lt;/a&gt;
      &lt;span class="count-wrapper"&gt;(16)&lt;/span&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/dd&gt;</code></pre>
</div>
</div>
</p>

<p>How Can I override the <code>width</code> property of all the <code>li</code> tags that resides in the class named <code>flt-block-content</code> with my custom value?</p>

<p>Second Q: Is the use of <code>!important</code> necessary for overriding?</p>