如果有第二个 CSS class 是否可以只更改某些元素？

Question

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

CSS 是否可以更改其中包含第二个 class 的元素？会使用香草 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>

Answer 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>

如果有第二个 CSS class 是否可以只更改某些元素？

Is it possible for only certain elements to be changed if they have a second CSS class?

html

javascript

css

css-selectors