CSS3按钮cursor:pointer属性不生效，请求排查代码问题

提供的代码 #

CSS代码 #

button {
    margin: 10px;
    padding: 5px;
    background-color: lightsalmon;
    width: 20%;
    font-weight: bold;
    color: white;
    border: 1px double dodgerblue;
    border-radius: 3px;
    cursor: pointer;
}

HTML代码 #

<button type="submit" name="submit">Login</button><br><br>

问题排查与解决 #

你的代码本身语法和逻辑没有错误，光标未生效通常是以下几种原因导致：

• CSS优先级冲突：页面中可能存在其他优先级更高的规则（比如更具体的选择器button[type="submit"]、父容器嵌套的选择器，或者行内样式）覆盖了cursor: pointer。
• CSS未正确加载：检查CSS文件是否正确引入到HTML文档中，<style>标签是否放置在<head>内，有没有路径拼写错误。
• 浏览器缓存：浏览器缓存了旧的CSS资源，强制刷新页面（Ctrl+F5 / Cmd+Shift+R）即可加载最新样式。
• 元素被遮挡：按钮可能被透明的上层元素覆盖，导致鼠标实际悬停在遮挡元素上而非按钮本身。可以通过浏览器开发者工具的元素选择功能，查看当前hover的元素。

如果是优先级冲突问题，可以优化选择器提高优先级，比如：

button[type="submit"] {
    margin: 10px;
    padding: 5px;
    background-color: lightsalmon;
    width: 20%;
    font-weight: bold;
    color: white;
    border: 1px double dodgerblue;
    border-radius: 3px;
    cursor: pointer;
}

紧急情况下（不推荐滥用），可以使用!important强制生效：

button {
    /* 其他样式不变 */
    cursor: pointer !important;
}

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