SharePoint 2019：如何为Web Part表格列及标题添加颜色？

方法1：嵌入自定义CSS（精准控制单页面列表，对应Idea1） #

SharePoint 2019的列表Web Part表格有固定的HTML结构，可通过自定义CSS定位标题行和指定列设置样式：

• 打开目标页面进入编辑模式
• 添加嵌入代码Web Part到页面任意位置
• 在代码框中粘贴以下CSS（按需修改颜色值）：

/* 设置列表标题行背景与文字颜色 */
.ms-listviewtable th.ms-vh2 {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* 设置第一列（标题+内容）的颜色 */
.ms-listviewtable td.ms-vb2:nth-child(1),
.ms-listviewtable th.ms-vh2:nth-child(1) {
    background-color: #3498db !important;
    color: #ffffff !important;
}

/* 设置第二列的颜色，可复制此段修改nth-child数字添加更多列 */
.ms-listviewtable td.ms-vb2:nth-child(2),
.ms-listviewtable th.ms-vh2:nth-child(2) {
    background-color: #e74c3c !important;
    color: #ffffff !important;
}

• 保存页面后刷新，样式即可生效

提示：!important用于覆盖SharePoint默认样式；nth-child(n)中的n对应列的序号（从1开始）。

方法2：修改母版页（全局站点生效，对应Idea2） #

若需所有列表Web Part统一应用样式，可修改站点母版页：

• 进入网站设置 > Web设计器库 > 母版页和页面布局
• 下载当前使用的母版页（如seattle.master）到本地
• 用代码编辑器打开母版页，在<head>标签内插入上述自定义CSS代码
• 上传修改后的母版页，设置为站点默认母版页
• 刷新站点页面，所有列表Web Part将自动应用样式

注意：修改母版页会影响全站页面，操作前务必备份原文件。

补充技巧 #

通过浏览器F12开发者工具查看列表Web Part的专属ID，可在CSS选择器前添加该ID，实现仅针对特定列表生效的样式，避免影响其他列表。

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