ASP.NET母版页CSS问题：仅让自定义颜色作用于母版页

要让你的rebeccapurple颜色只作用于母版页本身，核心是给母版页的样式加上专属作用域，避免被子页面继承。原来的.masterfixed类是全局的，会影响所有页面中使用这个类的元素，我们可以通过以下步骤修复：

步骤1：给母版页的根容器添加唯一标识 #

在母版页的最外层容器（比如<form runat="server">或者顶层<div>）上添加一个专属的class或ID，比如master-page-root：

<form runat="server" class="master-page-root">
    <!-- 母版页的其他内容，包括你的.masterfixed表格 -->
    <table class="masterfixed">
        <!-- 表格内容 -->
    </table>
    <!-- ContentPlaceHolder 等其他元素 -->
</form>

步骤2：修改CSS选择器，限定作用域 #

把原来的全局样式改成嵌套在根容器选择器下，这样样式只会作用于母版页内的元素：

/* 仅母版页内的.masterfixed元素会应用这个样式 */
.master-page-root .masterfixed {
    table-layout: fixed;
    color: rebeccapurple;
}
.master-page-root .masterfixed td {
    overflow: hidden;
}

原理说明 #

母版页的CSS会被合并到子页面的<head>中，原来的全局类会被子页面的元素继承。通过给母版页根容器加专属标识，再把样式嵌套在这个标识下，就相当于给样式加了一个“母版页专属”的限定，子页面的元素不在这个根容器内，自然不会被这个样式影响。

如果你的母版页已经有一个唯一的根容器（比如带ID的form），也可以直接用ID选择器，比如#form1 .masterfixed，效果是一样的，只要保证这个选择器是母版页独有的就行。

内容的提问来源于stack exchange，提问作者Kelvin Ong