在 querySelector 中使用 Spread Operator 如何防止特定元素发生反应？

Question

这里我用query selector创建了一个Spread Operator，想要给除了tag之外的所有元素都涂上白色，在h1中我想应用另一种颜色，所以这里我也在h1中应用了白色，那么如何防止继承白色？所以这里我只在div和p标签中应用查询选择器，而在h1中没有应用，那么如何防止h1为白色呢？

  export default function App() {
  const allElements = [...document.querySelectorAll("div", "p")];
  allElements.forEach((element) => {
    console.log(element);
    element.style.backgroundColor = "#0000FF";
    element.style.color = "#fff";
  });
  
  return (
    <div className="App">
      <h1 className="heading">Heading</h1>
      <div>__________________</div>
      <p className="paragraph">paragraph</p>
    </div>
  );
}

Answer 1

查询选择器正在选择

，您在

上应用样式，这使得所有子组件都继承该样式。因此，也使您的

变白。我建议您可以使用状态来更改您想要的任何 div 或 p 标签的样式。在下面的代码片段中，您将使用 setWhiteColor 函数将

和

的颜色更改为白色。这是这样做的反应方式。

const [color, setColor] = useState(false);

const setWhiteColor = () => setColor("white");

return <div className="App">
  <h1 className="heading">Heading</h1>
  <div style={{color: color}}>__________________</div>
  <p style={{color: color}} className="paragraph">paragraph</p>
</div>