如何修改单个页面按钮样式且不影响其他页面按钮？

你之前用body .contact button无效，大概率是以下原因之一：

• .contact元素并非直接挂载在body下，选择器匹配范围不符合页面结构
• 其他页面也存在带有.contact类的元素，导致样式被误应用
• 目标样式的加载顺序在全局样式之前，被优先级更高的全局规则覆盖

以下是几个可靠的解决办法：

方法1：给目标页面的body添加唯一类名 #

这是最稳妥的页面级隔离方案，确保样式只作用于指定页面：

1. 修改联系页面的body标签，添加专属类名：

<body class="contact-page">

2. 在CSS中使用该类名精准定位按钮：

/* 全局按钮样式 */
button {
    background: #1c00b5;
    width: 100px;
    border: none;
    outline: none;
    color: #fff;
    height: 35px;
    border-radius: 30px;
    margin-top: 20px;
    box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}

/* 联系页面专属按钮样式 - 放在全局样式之后 */
.contact-page button {
    background: #b5001c; /* 替换成你想要的背景色 */
    box-shadow: 0px 5px 15px 0px rgba(181,0,28,0.3);
    /* 其他需要修改的样式属性 */
}

方法2：给目标按钮添加专属类名 #

如果只需要修改页面中特定的几个按钮，直接给按钮加独立类名更精准：

1. 给联系页面的按钮添加类名：

<button class="contact-submit-btn">提交</button>

2. 编写专属CSS：

.contact-submit-btn {
    background: #b5001c;
    box-shadow: 0px 5px 15px 0px rgba(181,0,28,0.3);
    /* 覆盖全局样式的其他属性 */
}

方法3：调整选择器优先级（临时应急方案） #

如果不想修改HTML结构，可以提升选择器的优先级，比如增加父元素层级或使用!important（不推荐长期使用，会增加样式维护难度）：

/* 增加父元素层级提升优先级 */
body div.contact button {
    background: #b5001c;
}

/* 极端情况用!important */
body .contact button {
    background: #b5001c !important;
}

另外注意：确保你的目标样式代码放在全局按钮样式之后加载，否则会被全局样式覆盖。

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