You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无法用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 11:47:37