html - 伪类对子元素和父元素的影响

Question

我有一个 <input>在 <div> 里面.现在如果我使用伪类 :hover这两个元素都获得了伪类。

但是如果我使用 :focus只有 <input>得到那个伪类。 我读过只有某些元素可以有 :focus伪类和<div>不是其中之一。

现在我想知道是否有其他一些我可以使用的伪类存在于两个标签上，其行为与 :focus 相似, 但会出现在两个标签上，如 :hover

更新: plunker说明问题。

Answer 1

有效地，为了能够被聚焦，一个元素需要是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 获得焦点时选择它，而是希望在它包含焦点元素时选择它。

Selectors Level 4 草案通过创建新的 :focus-within 伪类解决了这个问题:

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。