我需要防止最后一个孩子添加背景颜色。重置框需要保持白色。我不想给重置框一个不同的类，只是为了防止它改变颜色。我需要不添加样式。任何帮助或朝着正确方向的推动将不胜感激。我尝试使用：not(：last-child(，但这似乎不起作用。
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last-child)").css('background-color', boxColor);
});
这是我的代码：
$(".btn").click(function () {
boxColor = $(this).val();
$(".box").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
@media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>您应该只在查询上使用:last元素选择器。
我认为您可能还希望将背景颜色设置为无，而不是删除整个样式属性，以防万一您将来想向不应重置的元素添加更多 css 样式。
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").css('background-color', 'none');
});
你应该改用:last。:last-childCSS 选择器考虑同一容器中的元素：
:last-childCSS 伪类表示同级元素组。裁判
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
@media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>