Question

我正在开发一个ASP.NET Web应用程序，它在其站点主机（在ContentPlaceHolder3中）中放置了一些应该适用于整个网站的css样式。这种风格的一部分如下：

.Welcome { 
width:531px; 
margin:5px 15px; 
float:left; 
padding:5px 10px; 
}
.Welcome ul { 
width:250px; 
float: left; 
margin:5px 3px; 
padding:0; 
list-style:none; 
}
.Welcome li {
background:url(images/ul_li.gif) left no-repeat;
padding:5px 20px; 
margin:0; 
font: normal 12px Georgia, "Times New Roman", Times, serif; /* the original font-size was 11px. */ 
color:#5c5c5c; 
}

现在，在其中一个网站页面中，我想在ContentPlaceHolder中放入一些具有以下特定样式的内容：

/*body { font: 0.8em Arial, sans-serif; }*/
        .tipsMenu { padding: 0; clear: both; }
        .tipsMenu li { display: inline; }
        .tipsMenu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
        .tipsMenu li.active a { background: #eef; }
        .tipsContent { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 60px; width: 400px; }

修改的 * 当我尝试这样做时，我从site.master页面中的CSS文件中获得了一些样式。那么如何使用内联样式覆盖母版页中的样式？ *

Answer 1

除了确保在site.master页面中嵌入特定样式后加载特定样式，您可以尝试以下几点：

1。检查新款式的css specificity。基本上，您需要确保新样式中使用的选择器比其他样式表中使用的选择器更具体。简而言之，内联样式比id更具体，id比类更具体，类比html元素更具体。 e.g：

#selector {
    // High specificity
}
.selector1 .selector2 .selector3 {
    // Less specificity than #selector, #selector styles applied
}

2。将!important子句添加到样式中。这会覆盖特异性规则并强制浏览器使用重要样式。虽然更容易，但出于其他原因，不建议使用此方法以保持可维护性。像这样：

.tipsMenu { padding: 0 !important; clear: both !important; }
.tipsMenu li { display: inline !important; }

如何覆盖site.master页面中的部分样式？

1 个答案: