为什么不将img指令应用于使用:: before插入的图像？

Question

这个html

<ul>
    <li>one</li>
    <li>two</li>
</ul>

和这个CSS：

li {display:table-cell; border:1px solid black;}

li:before{
  content: url(http://i.imgur.com/7qZR5GX.png);
  display:inline-block;
  vertical-align:middle;
}

按预期产生以下内容：

上面示例的小提琴：http://jsfiddle.net/Udg6J/

但是，如果您将CSS更改为以下内容：

li {display:table-cell; border:1px solid black;}

li img {
  display:inline-block;
  vertical-align:middle;
}

li:before{
  content: url(http://i.imgur.com/7qZR5GX.png);
}

它不再有效：

这个例子的小提琴：http://jsfiddle.net/3kLyu/

问题

我认为content: url(http://i.imgur.com/7qZR5GX.png)相当于将带有src的<img>标记插入到html中？那么为什么li img CSS指令不适用于使用:before创建的内容？

我想理解为什么上面两个例子不相同？

Answer 1

li img { ... }

你的形象不是LI的孩子，它本身就是LI的伪元素。它实际上不在DOM中，所以普通的CSS规则不适用。