我在一段时间后在设计中看到了这个功能，并认为“干草，这看起来是个好主意”。但是进一步研究它，我不确定使用'just css'是完全可能的。
左侧有一个导航栏：
ul{
background:red;
display:inline-block;
padding:20px;
}<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
当浏览器窗口失去焦点时，有没有办法改变这个？
即。当用户点击浏览器时，为了使这个导航的背景颜色，例如，改变？
唯一可能的（可能更多效率低下的方式就是这样做）：
body:hover ul {
background: red;
}
body ul {
display: inline-block;
padding: 20px;
background: blue;
}<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
但显然
更多的是我希望浏览器在更改css之前实际上“失去焦点”。
有人会对如何实现这一点有任何想法吗？
答案 0 :(得分：4)
当前或即将出现的CSS标准都没有定义用户代理何时不在前台的任何选择器或媒体查询。 1
评论中提到的Page Visibility API并不能完全满足您的需求，因为它不会告诉您浏览器是否在前台，只是页面是否可见。浏览器窗口可以在后台，但如果窗口未被最小化或者没有被另一个窗口完全遮挡，则其当前选项卡仍然可见（并且使用前面提到的API，您甚至无法获得一致的结果） ）。
您可以做的最好的事情是使用JavaScript监听窗口焦点和模糊事件：
window.onfocus = function() {
document.body.className = '';
};
window.onblur = function() {
document.body.className = 'blur';
};ul {
display: inline-block;
padding: 20px;
background: red;
}
.blur ul {
background: blue;
}<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
需要注意的是，如果页面位于iframe中（例如在Stack Snippet中，如上所述），这将无法正常工作，因为当iframe本身失去焦点时，iframe的window对象将失去焦点。
我不知道有什么方法可以可靠地检测浏览器窗口何时变为活动或非活动状态。
1 Firefox在内部使用:-moz-window-inactive伪类，其工作方式完全符合您的预期，但显然这是一个特定于浏览器的功能，因此不应该是用于生产代码：
ul {
display: inline-block;
padding: 20px;
background: red;
}
ul:-moz-window-inactive {
background: blue;
}<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
WebKit也有自己的:window-inactive伪类，这实际上是启发Firefox中相同功能的原因，除了WebKit没有为某些奇怪的原因添加前缀，它目前只适用于scrollbar伪元素。
答案 1 :(得分：0)
因为css在文档范围内执行，所以你无法在css中检测焦点。但您可以使用html5 body属性
tabindex
body:focus ul {
background: red;
}
body ul {
display: inline-block;
padding: 20px;
background: blue;
}<body tabindex="0">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</body>
答案 2 :(得分：0)
您可以尝试 :window-inactive：
::selection {
background: hsl(136,65%,45%);
color: white;
}
::selection:window-inactive {
background: hsl(136,25%,65%);
}
已实施at least in firefox，您可以看到它正在its test page (firefox only)上工作。