如何改变样式点击只有一个元素的许多相同的元素-角度

<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>

const elements = document.querySelectorAll('.element');

elements.forEach(element => {
  element.addEventListener('click', () => {
    // 在这里改变样式
    element.style.backgroundColor = 'red';
  });
});

<div class="parent">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

.parent div:nth-child(2) {
  /* 改变第2个子元素的样式 */
  background-color: red;
}

<div class="element element-1">Element 1</div>
<div class="element element-2">Element 2</div>
<div class="element element-3">Element 3</div>

.element {
  /* 共同样式 */
  background-color: blue;
}

.element.active {
  /* 激活状态样式 */
  background-color: red;
}

const elements = document.querySelectorAll('.element');

elements.forEach(element => {
  element.addEventListener('click', () => {
    // 切换类名
    element.classList.toggle('active');
  });
});