Question

我有一个类名列为.box的元素列表。有时候，一个元素会有一个额外的类，但我不知道哪个元素有它。

有没有办法检查.box的所有元素是否都没有.extraClass，然后将样式应用于.box，但如果.box的任何元素具有类.extraClass，然后不应用css样式？

我想只使用css。

JSFiddle

var toggleClass = document.getElementById('toggleClass'),
  box = document.getElementsByClassName('box'),
  randomNumber = -1;

toggleClass.addEventListener('click', function() {
  if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
  randomNumber = Math.floor(Math.random() * 9);
  box[randomNumber].classList.toggle('extraClass');
});
removeClass.addEventListener('click', function() {
  if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
});

#wrapper {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.box {
  background-color: yellow;
  width: 100px;
  height: 100px;
  border: 1px solid;
  list-style-type: none;
}
/*If all of '.box' DOES'T have the class '.extraClass`; make background of '.box' pink*/

.box {
  background-color: pink;
}
.extraClass {
  background-color: red;
}

<ul id="wrapper">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

<button id="toggleClass">Toggle Class</button>

<button id="removeClass">Remove Class</button>

Answer 1

听起来你应该使用你添加.extraClass时也添加到父级的第三个CSS类 - 只使用这两个可能会很麻烦。例如，您可以使用以下样本样式：

#wrapper:not(.disableStyling) .box {
  background: red;
}

这样，无论何时将.extraClass添加到框中，还要将.disableStyling类添加到包装器中。它可能会让它更容易理解

编辑：

这是您需要更改的js细分：

var toggleClass = document.getElementById('toggleClass'),
  box = document.getElementsByClassName('box'),
  wrapper = document.getElementById('wrapper'),
  randomNumber = -1;

toggleClass.addEventListener('click', function() {
  if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
  randomNumber = Math.floor(Math.random() * 9);
  box[randomNumber].classList.toggle('extraClass');
  var boxes = document.getElementsByClassName("box");
  var disabled = false;

  for (var i = 0; i < boxes.length; i++)
    if (boxes[i].classList.contains("extraClass")) disabled = true;
  if (disabled)
    wrapper.classList.add("disableStyling");
  else
    wrapper.classList.remove("disableStyling");
});
removeClass.addEventListener('click', function() {
  if (randomNumber !== -1) {
    box[randomNumber].classList.remove('extraClass');
    wrapper.classList.toggle('disableStyling');
  }
});

Answer 2

Vanilla CSS并不具备这样的逻辑运算......除非你想在逻辑上找出某种静态解决方案，否则你需要使用JavaScript。

这是jQuery的解决方案：https://jsfiddle.net/d748Lxx7/

注意反转它的!（否则它看起来会返回true）。

如果所有元素都没有特定的类，则应用样式

JSFiddle

2 个答案: