为什么样式不适用于特定类的子节点？

Question

对于搜索字段，我添加动态 div 子节点，如下所示：

    <div id="recommand" class="recommand"></div>

    data.result.forEach(function(entry) {
            let cont: rcommand;
            cont.username = entry[0];
            const x = document.getElementById('recommand') as HTMLInputElement;
            const blocktoinsert = document.createElement( 'div' );
            blocktoinsert.innerHTML = cont.username;
            x.appendChild(blocktoinsert);
          });

    .recommand div{
      background-color:red;
    }

但未应用背景颜色。知道为什么吗？

谢谢！

Answer 1

根据 html 的样式，你定位错误。

这是正确的：

div.recommand {
  background-color: yellow;
}

如果上述工作不正常，试试这个：

.recommand > div 选择父元素为.recommand 元素的所有<div> 元素。

.recommand + div 选择紧跟在.recommand 元素之后的所有<div> 元素。

如果我错了请写评论。