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

Question

请仅使用 CSS!

基本上，当某个文本区域被 :focused 时，我想将一些样式应用于页面上的所有内容(或几乎所有内容)，除了某个文本区域。

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

我尝试摆弄 :not() 但我无法正常工作。

我可能还想将其扩展为:将某些样式应用于页面上的所有内容(或几乎所有内容)，但当特定文本区域为 时，特定 div 除外:聚焦。

这是一个我试图从中学习的过于复杂的例子: http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/

Answer 1

无法使用 CSS 提升 DOM 层次结构，因此您要做的是确保相关的文本区域是您想要淡出的任何内容的容器的兄弟。在这一点上你应该能够做这样的事情:

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

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