Question

我想更改css但我无法覆盖默认值。我的页面代码是`

<h1 class="page_title">Today's Top Ten Videos</h1>              
<div id="main_inner">
<div class="top-layout"><div class="top-layout-row">
<div class="top-layout-cell"><h4 class="top-video-title">
 <a href="http://xxx">Title</a></h4>

以下css是整个网站，我无法改变它。：

#main_inner h4, #main_inner h4 a{
 letter-spacing: 0;
  line-height: 155%;
  font-weight: bold !important;
  background-color: #f5f3f3 !important;
  color: #006c9f !important;
  text-transform: none !important;
}
#main h4:before, footer .widgettitle:before, h1.page_title:before, #sidebar h4.widgettitle:before, .about_author_title:before, #reply-title:before, #comments_title:before {
  content: "|||";
}

我试图将css更改为h4.top-video-title{background-color:none !important;} h4.top-video-title ::before{ content: "";}

但它不起作用。我该如何更改CSS？

Answer 1

您可以使用CSS Specificity进行覆盖。使用比您在网站上找到的遗留代码中使用的选择器更多的选择器。

例如：

#main_inner h4, #main_inner h4 a{
 letter-spacing: 0;
  line-height: 155%;
  font-weight: bold !important;
  background-color: #f5f3f3 !important;
  color: #006c9f !important;
  text-transform: none !important;
}
#main h4:before, footer .widgettitle:before, h1.page_title:before, #sidebar h4.widgettitle:before, .about_author_title:before, #reply-title:before, #comments_title:before {
  content: "|||";
}

如果要覆盖：

#main_inner h4

你需要使用更多的选择器或更高的选择器，因为他们使用了id。

尝试

#main_inner h4.top-video-title{
   background-color:none !important;
}

我刚刚写了一篇关于此事的帖子：http://blog4coders.com/css-specificity/

Answer 2

它似乎是CSS优先级，因为其他人有嵌套选择器。尝试使用与现有选择器相同的选择器，但在之前添加body：

body #main_inner h4, body #main_inner h4 a

和!important也适用于规则，因此您可以增加选择器优先级。

Answer 3

而不是没有，请使用透明！重要

h4.top-video-title { 
 background-color: Transparent !important;
}

如何覆盖！在css中很重要

3 个答案: