Question

CSS：

ul #allposts li{
    height: 50px;
    width: 50px;
    background-color: yellow;
    border: 1px solid yellow;
}

HTML：

<ul id = "allposts"></ul>

JS：

var woow2 = document.getElementById('allposts');
var oneofpost = document.createElement('li');
woow2.appendChild(oneofpost);

当我运行代码时，oneofpost不会出现。它应该看起来像一块小黄砖吗？

任何想法为什么？

Answer 1

http://jsfiddle.net/dFD7p/

#allposts li{  //just removed the ul(space) and works
    height: 50px;
    width: 50px;
    background-color: yellow;
    border: 1px solid yellow;
}

Answer 2

取出ul和#allposts之间的空格。应该这样做。

（注意：您实际上并不需要ul#allposts因为ID是唯一的，因为其他答案提醒了我。）

Answer 3

问题在于你的CSS。你的选择器应该是：

ul#allposts li

但ID应该是唯一的，因此您不需要使用标记名称对其进行限定：

#allposts li

目前的选择器显示为：

所有li元素都是ID为allposts的元素的后代，这些元素是所有ul元素的后代，这可能不是您想要的。

添加不在JavaScript中工作的孩子

3 个答案: