如何覆盖CSS类

Question

我有一个由Drupal生成的网页，它附带了一个样式表。

我想覆盖其中一种样式。它设置为这样的类：

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

因此，我希望该页面使用我的“.description”样式，而不是使用Drupal CSS附带的“.description”样式。换句话说 - 如果页面有2个“.description”样式，我该如何告诉页面使用我的？

Answer 1

1. 使用带higher specificity的选择器：

   div.description {
       /* will take precedence over just .description */
   }
   

2. 将样式表放在要覆盖的样式表之后：

   /* Drupal's style */
   .description {
       foo: bar;
   }
   
   /* Your style */
   .description {
       foo: baz; /* takes precedence over foo: bar */
   }
   

3. 请勿使用!important。请勿使用。

另见CSS 3: Calculating Selector Specificity。