如何解决点击子元素后父元素的css样式也生效

这种情况可以使用事件委托（Event Delegation）来解决。事件委托是利用事件冒泡的原理，将事件统一绑定到父元素上，通过判断触发事件的子元素来执行相应的操作。

例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现：

document.querySelector('.parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    // 执行子元素的操作
  }
  event.stopPropagation(); // 阻止事件冒泡到父元素
});

这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。同时，为了防止事件冒泡到父元素，我们使用了 `event.stopPropagation()` 方法。

相关问题

react如何解决点击子元素后父元素的css样式也生效

在 React 中，也可以使用事件委托来解决点击子元素后父元素的 CSS 样式也生效的问题。不同于使用原生 JavaScript，React 中需要使用 `event.currentTarget` 属性来获取当前绑定事件的元素。

例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现：

class Parent extends React.Component {
  handleClick = (event) => {
    if (event.target.classList.contains('child')) {
      // 执行子元素的操作
    }
    event.stopPropagation(); // 阻止事件冒泡到父元素
  }
  
  render() {
    return (
      <div className="parent" onClick={this.handleClick}>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
      </div>
    );
  }
}

在 `handleClick` 方法中，我们使用 `event.target` 来获取触发事件的元素，使用 `event.currentTarget` 来获取当前绑定事件的元素。当触发事件的元素是子元素时，执行子元素的操作，同时使用 `event.stopPropagation()` 方法阻止事件冒泡到父元素。

这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。

css使父元素样式

可以使用CSS中的子选择器（child selector）或后代选择器（descendant selector）来实现让父元素样式生效的效果。

子选择器使用符号“>”，可以选择直接作为父元素子元素的元素。例如：

.parent > .child {
  /* 父元素样式 */
}

后代选择器使用空格符号，可以选择所有作为父元素后代的元素。例如：

.parent .child {
  /* 父元素样式 */
}

需要注意的是，在使用这些选择器时，需要保证父元素和子元素的选择器表达式正确，否则样式可能无法生效。