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

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 元素更具体。例如:

#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; }