开发者

How to override a CSS class

I have a webpage that 开发者_StackOverflowis generated by Drupal and it comes with a certain stylesheet attached to it.

I would like to override one of the styles. It is set with a class like this:

<div class="description"></div>

So instead of using the ".description" style that comes with the Drupal CSS, I would like the page to use my ".description" style. In other words - if the page has 2 ".description" styles, how do I tell the page to use mine?


  1. Use a selector with higher specificity:

    div.description {
        /* will take precedence over just .description */
    }
    
  2. Place your stylesheet after the one you want to override:

    /* Drupal's style */
    .description {
        foo: bar;
    }
    
    /* Your style */
    .description {
        foo: baz; /* takes precedence over foo: bar */
    }
    
  3. Do not use !important. Just don't.

See also CSS 3: Calculating Selector Specificity.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜