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

Question

只有CSS！

基本上我想将一些样式应用到页面上的所有内容（或几乎所有内容），除了特定文本区域:focus之外的某个textarea。

所以，当我专注于textarea时，其他一切都会得到opacity: 0或类似的东西。

我试图摆弄:not()，但我无法完成它。

我也可能想要扩展一下来说：将某些样式应用于页面上的所有内容（或几乎所有内容），但某个 div 除外，当某个textarea为{{1}时}编

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

Answer 1

使用CSS无法提升DOM层次结构，因此您要做的是确保相关的textarea是容器的兄弟，以便您想要淡出任何内容。那时你应该可以做类似的事情：

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

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

Answer 2

我能想到的最接近的是：

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

由于*:not(textarea:focus)似乎打破了它。