我正在开发一个竖起大拇指/竖起大拇指的功能，按下大拇指向上的图标将使图标变成绿色，按下大拇指向下的图标将使图标变成红色。但是，我认为我没有完全理解 css 文件中的“复选框”功能。
我现在拥有的代码在点击每个拇指时会将它们变成红色。我认为发生这种情况是因为我的 css 文件底部附近的两个输入存在冲突，并且红色输入位于最后，因此它具有优先级。不过，我正在努力寻找一种方法来区分这两个输入。
body {}
.main_box {
background-color: #320082;
height: 500px;
width: 250px;
border: 2px solid #000000;
border-radius: 20px;
}
h1 {
text-align: center;
font-size: 40px;
color: #ff4da6;
}
h2 {
font-size: 16px;
text-align: center;
color: aliceblue;
}
.glow {
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}
.greencheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.redcheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
input[type=checkbox] {
appearance: none;
height: 100px;
width: 100px;
background-color: rgb(175, 175, 175);
border-radius: 50%;
}
.thumb {
position: absolute;
font-size: 35px;
color: white;
}
input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
input[type=checkbox]:checked {
background-color: rgb(160, 0, 0);
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="MainBox.css" />
<title>checkbox</title>
</head>
<body>
<div class="main_box">
<h1 class="glow">Wolfies</h1>
<h2>560 Bungalow St</h2>
</div>
<div class="greencheckbox">
<input type="checkbox">
<ion-icon name="thumbs-up" class="thumb"></ion-icon>
</div>
<div class="redcheckbox">
<input type="checkbox">
<ion-icon name="thumbs-down" class="thumb"></ion-icon>
</div>
</body>
</html>你是对的，这是一个风格级联问题。您需要做的就是链接父元素的选择器以特定于每个输入。
像这样：
.greencheckbox input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
.redcheckbox input[type=checkbox]:checked {
background-color: rgb(160, 0, 0);
}
body {}
.main_box {
background-color: #320082;
height: 500px;
width: 250px;
border: 2px solid #000000;
border-radius: 20px;
}
h1 {
text-align: center;
font-size: 40px;
color: #ff4da6;
}
h2 {
font-size: 16px;
text-align: center;
color: aliceblue;
}
.glow {
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}
.greencheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.redcheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
input[type=checkbox] {
appearance: none;
height: 100px;
width: 100px;
background-color: rgb(175, 175, 175);
border-radius: 50%;
cursor: pointer;
}
.thumb {
position: absolute;
font-size: 35px;
color: white;
}
.greencheckbox input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
.redcheckbox input[type=checkbox]:checked {
background-color: rgb(160, 0, 0);
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="MainBox.css" />
<title>checkbox</title>
</head>
<body>
<div class="main_box">
<h1 class="glow">Wolfies</h1>
<h2>560 Bungalow St</h2>
</div>
<div class="greencheckbox">
<input type="checkbox">
<ion-icon name="thumbs-up" class="thumb"></ion-icon>
</div>
<div class="redcheckbox">
<input type="checkbox">
<ion-icon name="thumbs-down" class="thumb"></ion-icon>
</div>
</body>
</html>