Question

很抱歉，如果这个问题已经存在，但我没有设法找到它。我想知道为什么img：在CSS之后不起作用。我尝试将img的显示设置为阻止而不是，但它每次都拒绝工作......有什么想法吗？我试图在图像之后放置一个背景图像（对于oldschool阴影），但只有当我将图像放在div / span中时它才有效。

这就是我一直试图运行的：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise2</title>
        <link rel="stylesheet" type="text/css" href="exercise2.css">
    </head>
    <body>
        <div id="container">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJxP3c9QZ--VxiX0M1p9shvBa0KDLGjTjlqC3V4ygH_zA6vn-Bvw">
        </div>
    </body>
</html>

CSS：

#container {
    width: 100%;
}

img {
    display: block;
}

.shadow:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    top: 10%;
    content: "";
    height: 90%;
    width: 6px;
    background: url(pictures/shadow_side.png) repeat-y 0% 0%;
}

Answer 1

将:after pseudo-element视为:last-child之类的内容。它在元素的文档树之后在包含元素的中添加了一个伪元素。 Images有空 content model，这意味着您无法在其中放置其他元素（或伪元素）。

Answer 2

规格说明

请注意。该规范没有完全定义以下的交互：之前和之后的＆gt;替换元素（例如HTML中的IMG）。这将在未来更详细地定义＆gt;说明书

所以这可能意味着：之后和：之前不使用img元素

Answer 3

图像中没有任何内容（它们自己关闭）。由于:before和:after会在元素中附加内容（请查看this awesome article by Chris Coyier），因此您不能简单地通过:before和:after选择器添加一些内容在<img>标记中。

即使可以，您的<img>代码也没有class="shadow"，也应该有。{/ p>

为什么不是img：工作之后？

3 个答案: