如何清除HTML按钮中的黑色虚线？附代码请求排查问题

嘿，我一眼就瞅出问题所在啦！你写的CSS规则只针对.btn1这个类生效，但你的按钮分别用了btn2、btn3、btn4这些不同的类名——除了第一个「Home」按钮，其他按钮根本匹配不到你写的样式规则，自然不会显示你想要的效果。

给你几个简单的解决办法，选哪个都能搞定：

方法一：统一按钮的类名 #

直接把所有按钮的class属性都改成btn1，这样所有按钮都会共用同一套样式：

<div>
<a href="#">
<button class="btn1">Home</button>
</a>
<a href="product.html">
<button class="btn1">Products</button>
</a>
<a href="#">
<button class="btn1">Buy Now</button>
</a>
<a href="findus.html">
<button class="btn1">Find us</button>
</a>
</div>

方法二：扩展CSS选择器，包含所有按钮类名 #

修改你的CSS，把所有需要应用样式的类名用逗号分隔，这样每个类都会触发这套样式：

.btn1, .btn2, .btn3, .btn4 {
font-family: 'Times New Roman', Times, serif;
margin-right: 0px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
}

方法三：使用通用类（更推荐的可扩展写法） #

给所有按钮添加一个通用的基础类，比如btn，然后CSS针对这个通用类写样式；如果以后某个按钮需要单独调整，再额外加专属类。这种方式更灵活：

修改后的CSS： #

.btn {
font-family: 'Times New Roman', Times, serif;
margin-right: 0px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
}

修改后的HTML： #

<div>
<a href="#">
<button class="btn">Home</button>
</a>
<a href="product.html">
<button class="btn">Products</button>
</a>
<a href="#">
<button class="btn">Buy Now</button>
</a>
<a href="findus.html">
<button class="btn">Find us</button>
</a>
</div>

选其中一种方法修改后，所有按钮就都会显示你想要的样式啦！

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