How to override CSS style (list-style-type) set in main CSS file
I am trying to override a CSS setting for lists in one of my pages. In my master CSS file, I have set the following rule:
ul, li { list-style-type: none; }
I have one page, where I DO want to set the style of the list - I would also like to increase the spacing between those list items on that single page.
The page looks like this:
<div><h3 style="color:#023467;">Hello</h3>
<ul style="color:#006699; list-style-type:circle;"> <!-- has no effect -->
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
&开发者_如何学Golt;li>line 4</li>
</ul>
</div>
So far I have tried the following:
- Adding the style to the containing UL tag
- Adding the style BOTH to the containing UL tag and each LI tag
None has worked so far. Since I have over 1K pages referencing the main.css file, I do not want to change it. But how can I override the settings for the specific list items in my page?
Why am I not able to override the settings in my main.css if even I apply the style at the element itself?
Add this to your CSS file:
ul.circle, ul.circle > li { list-style-type: circle; }
Use this markup:
<div><h3 style="color:#023467;">Hello</h3>
<ul class="circle" style="color:#006699;">
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
Make sure that no other rules set ul list-style-type.
精彩评论