我想改变css中的一个按钮的背景色。CSS链接工作正常，当我尝试应用bootstrap或使用DOM更改颜色时，按钮会改变颜色，但当我使用CSS时则不会。
代码如下:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method..body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>你的CSS语法错误。分号;必须放在每个CSS属性之后，而不是每个CSS规则之后。
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>CSS不是C/c++或任何需要分号的东西。不能在样式的末尾键入分号。
你写的,
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
但这是正确的;
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
必须在行尾加上分号。如您所见，以: red;结尾的行。不像};
看不清，你的分号位置不对
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
正确
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}