防止应用最后一个孩子的样式答案

【问题标题】：Prevent the last child from having styled be applied防止应用最后一个孩子的样式
【发布时间】：2019-02-07 12:33:25
【问题描述】：

我需要防止最后一个孩子添加背景颜色。重置框需要保持白色。我不想给重置框一个不同的类，只是为了防止它改变颜色。我需要不添加样式。任何帮助或推动正确的方向将不胜感激。我尝试使用 :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-child，因为这里不是关于兄弟元素，也不是关于CSS选择器而是jQuery选择器

标签： javascript jquery html css

【解决方案1】：

您应该改用:last。 :last-child CSS 选择器考虑同一容器内的元素：

:last-child CSS 伪类表示 最后一个元素 兄弟元素组。^ref

$(".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>

【讨论】：

【解决方案2】：

您应该只在查询中使用:last 元素选择器。

我认为您可能还想将背景颜色设置为无，而不是删除整个样式属性，以防万一您希望将来向不应重置的元素添加更多 CSS 样式。

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").css('background-color', 'none');
});

【讨论】：