伪 类 对子元素和父元素的影响
Effect of pseudo classes on child- and parent-elements
我在 <div> 里面有一个 <input>。
现在，如果我使用伪class :hover，两个元素都会得到伪class。
但是如果我使用 :focus 只有 <input> 得到那个伪 class。
我读过只有某些元素可以具有 :focus 伪 class 而 <div> 不是其中之一。
现在我想知道是否还有其他一些伪 class 我可以使用它存在于两个标签上，其行为与 :focus 相似，但会出现在两个标签上，如 :hover
更新：
plunker 说明问题。
我不认为你可以只用 CSS 做你想做的事你可能需要一些 jquery 比如：
$(document)
.on("focus", "input", function(){
///here what you want, in this example add a class to your div
$('div').addClass("divfocus");
})
有效地，为了能够被聚焦，一个元素需要focusable:
An element is focusable if all of the following conditions are
met:
- The element's tabindex focus flag is set.
- The element is either being rendered or is a descendant of a
canvas element that represents embedded content.
- The element is not inert.
- The element is not disabled.
你的情况，问题是第一个条件。您可以通过 tabindex 属性设置其 tabindex 焦点标志，使 div 可聚焦。
p:focus {
background: #0f0;
}
<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>
但是，有一个问题。文档中只能有一个重点元素。所以div和input不能同时对焦
事实上，当 div 获得焦点时，您不想 select 它，当它包含焦点元素时，您想要 select 它。
Selectors Level 4 草案通过创建新的 :focus-within 伪 class:
解决了这个确切的问题
9.4. The Generalized Input Focus Pseudo-class:
:focus-within
The :focus-within pseudo-class applies to elements for which
the :focus pseudo class applies. Additionally, the ancestors
of an element that matches :focus-within also match
:focus-within.
遗憾的是浏览器还不支持它。所以同时，使用JS。
我在 <div> 里面有一个 <input>。
现在，如果我使用伪class :hover，两个元素都会得到伪class。
但是如果我使用 :focus 只有 <input> 得到那个伪 class。
我读过只有某些元素可以具有 :focus 伪 class 而 <div> 不是其中之一。
现在我想知道是否还有其他一些伪 class 我可以使用它存在于两个标签上，其行为与 :focus 相似，但会出现在两个标签上，如 :hover
更新： plunker 说明问题。
我不认为你可以只用 CSS 做你想做的事你可能需要一些 jquery 比如：
$(document)
.on("focus", "input", function(){
///here what you want, in this example add a class to your div
$('div').addClass("divfocus");
})
有效地，为了能够被聚焦，一个元素需要focusable:
An element is focusable if all of the following conditions are met:
- The element's tabindex focus flag is set.
- The element is either being rendered or is a descendant of a
canvaselement that represents embedded content.- The element is not inert.
- The element is not disabled.
你的情况，问题是第一个条件。您可以通过 tabindex 属性设置其 tabindex 焦点标志，使 div 可聚焦。
p:focus {
background: #0f0;
}
<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>
但是，有一个问题。文档中只能有一个重点元素。所以div和input不能同时对焦
事实上，当 div 获得焦点时，您不想 select 它，当它包含焦点元素时，您想要 select 它。
Selectors Level 4 草案通过创建新的 :focus-within 伪 class:
9.4. The Generalized Input Focus Pseudo-class:
:focus-withinThe
:focus-withinpseudo-class applies to elements for which the:focuspseudo class applies. Additionally, the ancestors of an element that matches:focus-withinalso match:focus-within.
遗憾的是浏览器还不支持它。所以同时，使用JS。