无法用CSS修改按钮及<a>标签样式,CSS已正确关联HTML
问题原因与解决方法
核心问题是CSS选择器类型与HTML元素属性不匹配:
- HTML中元素使用的是
id属性(如id="myButton") - CSS中编写的是类选择器(以
.开头,如.myButton)
两者无法对应,导致样式无法应用。以下是两种修复方案:
方案一:修改CSS为ID选择器
将CSS中的类选择器(.)替换为ID选择器(#),代码如下:
#arthur{ width: 100%; height: auto; } #easy { background-color: #4CAF50; } #medium { background-color: #FFC107; } #myButton { background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%); background-color:#44c767; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627; }
方案二:修改HTML为class属性
将HTML中的id属性替换为class属性,同时把<link>标签移到<head>标签内(符合规范,避免潜在加载问题),代码如下:
<!DOCTYPE html> <html> <head> <title>Jeux d'arcade</title> <link rel="stylesheet" type="text/css" href="bouton.css"> </head> <body> <img src="arcade.jpg" class="arthur"> <h1>Jeux d'arcade</h1> <p>Sélectionnez le niveau de difficulté :</p> <a href="#" class="myButton">Facile</a> <button class="medium">Normal</button> </body> </html>
内容的提问来源于stack exchange,提问作者Victor D
相关产品推荐
相关产品推荐

