如果某些元素有第二个 CSS 类，是否可以只更改某些元素？答案

【问题标题】：Is it possible for only certain elements to be changed if they have a second CSS class?如果某些元素有第二个 CSS 类，是否可以只更改某些元素？
【发布时间】：2021-08-10 06:21:20
【问题描述】：

我正在尝试制作一个项目，其中某些元素在按下按钮时会产生动画，而分配了不同键的类似项目不会产生动画，除非也按下该键。我想知道这是否是可能的，或者我是否做错了。

CSS 是否可以对包含第二个类的元素进行更改？会使用 vanilla Javascript 或 DOM 操作吗？请帮我指出正确的方向。

例如，我想按 1，带有 'A' 的 span 会播放动画，但其他 span 不会。

table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 70%;
  margin-top: 7%;
}

table td {
  padding: 1rem;
  border: 2px solid #000000;
  position: relative;
}

.table-dots {
  position: absolute;
  top: -40%;
  left: 40%;
  background-color: #06f72f;
  color: #ffffff;
  border-radius: 100px;
  padding: 3px;
}

.bottom-row td {
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
}

<table>
  <tr>
    <td><span class="table-dots a-button" data-key="49">A</span></td>
    <td><span class="table-dots b-button" data-key="50">B</span></td>
    <td><span class="table-dots c-button" data-key="51">C</span></td>
  </tr>
  <tr>
    <td><span class="table-dots a-button" data-key="49">A</span></td>
    <td><span class="table-dots b-button" data-key="50">B</span></td>
    <td><span class="table-dots c-button" data-key="51">C</span></td>
  </tr>
  <tr>
    <td><span class="table-dots a-button" data-key="49">A</span></td>
    <td><span class="table-dots b-button" data-key="50">B</span></td>
    <td><span class="table-dots c-button" data-key="51">C</span></td>
  </tr>
</table>

【问题讨论】：

与其问是否可能，不如假设它是可能的，试一试，如果遇到任何问题，请返回显示问题。
使用 .classList.length ?
JavaScript 有 Element.classList.add('someClass')、Element.classList.remove('someClass')、Element.classList.toggle('someClass') 和 Element.classList.contains('someClass')。首先在 CSS 中创建动画或过渡。

标签： javascript html css css-selectors

【解决方案1】：

在这种情况下，我建议不要使用包含的元素进行解析，而是使用您已经在使用的 data 属性。请参阅下面的示例以快速验证概念（假设我正确理解了您要完成的工作）。

animateKeys = (key) => {
  const cells = document.querySelectorAll("span[data-key='49']");
  for (let i = 0, x = cells.length; i < x; i++) {
    cells[i].classList.add("example");
  }
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 70%;
  margin-top: 7%;
}

table td {
  padding: 1rem;
  border: 2px solid #000000;
  position: relative;
}

.table-dots {
  position: absolute;
  top: -40%;
  left: 40%;
  background-color: #06f72f;
  color: #ffffff;
  border-radius: 100px;
  padding: 3px;
}

.bottom-row td {
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
}

@keyframes example-anim { to { transform: rotate(360deg); background-color: #f00; } }
@-webkit-keyframes example-anim { to { transform: rotate(360deg); background-color: #f00; } }

.example {
  animation: example-anim 2s linear infinite;
  -webkit-animation: example-anim 2s linear infinite;
}

<button onclick="animateKeys('49')">animate A cells</button>
<table>
  <tbody>
    <tr>
      <td><span class="table-dots a-button" data-key="49">A</span></td>
      <td><span class="table-dots b-button" data-key="50">B</span></td>
      <td><span class="table-dots c-button" data-key="51">C</span></td>
    </tr>
    <tr>
      <td><span class="table-dots a-button" data-key="49">A</span></td>
      <td><span class="table-dots b-button" data-key="50">B</span></td>
      <td><span class="table-dots c-button" data-key="51">C</span></td>
    </tr>
    <tr>
      <td><span class="table-dots a-button" data-key="49">A</span></td>
      <td><span class="table-dots b-button" data-key="50">B</span></td>
      <td><span class="table-dots c-button" data-key="51">C</span></td>
    </tr>
  </tbody>
</table>

【讨论】：