css - 将 CSS 样式添加到除焦点文本区域之外的所有内容

Question

请只使用CSS！

基本上，我想对页面上的所有内容（或几乎所有内容）应用一些样式，除了某个 textarea 被:focus编辑时。

因此，当我专注于 textarea 时，其他所有内容都会得到一个opacity: 0或类似的东西。

我试着摆弄，:not()但我无法完成工作。

我也可能想将其扩展为：对页面上的所有内容（或几乎所有内容）应用一些样式，除了在编辑某个 textarea 时的某个div:focus。

score 0 · Accepted Answer

我能想到的最接近的是：

*:not(textarea) {
color:red !important;
}

好像*:not(textarea:focus)要打破它。

score 0 · Accepted Answer

没有办法使用 CSS 来提升 DOM 层次结构，因此您要做的是确保相关的 textarea 是您想要淡出的任何内容的容器的兄弟。那时您应该能够执行以下操作：

textarea:focus ~ section.toFade {
  opacity: 0.1;
}

这是一个丑陋脆弱的解决方案（受 CSS 的限制），所以希望这只是一个学术练习。

2 回答 2