新元素 无伪类效果 求教怎么解决

Question

我的样式是这样的
*:focus{
outline: none;
color: black;
}
div{
color: forestgreen;
outline: none;
}
结果如下图
其中one two为开始时就存在的元素
阿为通过document.createElement('div')创建的元素
三个元素的父亲节点都一样

Answer 1

Answer 2

:focus 此伪类仅适用于焦点元素本身,比如input元素,div无法获得焦点无效,可以用:hover

CSS伪类 :focus表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

Answer 3

在 div 上添加 tabindex 属性

focus 的效果只在可以聚焦的的元素上生效，非表单输入元素，增加 tabindex 可以将元素变为可聚焦元素（按 tab 键可以 focus）

参考 MDN tabindex