开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜