Html CSS-img：在不处理铜版纸之后

我试图在我的铜版画廊中添加CSS样式，但它不起作用。下面是我想应用于图库缩略图的代码

.image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.image-wrap:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: solid 1px #1b1b1b;

    -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.image-wrap img {
    vertical-align: bottom;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

图像链接的伪类在应用图像换行时有点奇怪：在样式表之后，我试图弄清楚如何应用它时有点混乱。下面是我为a:link.image{

/* pseudo-classes for image links */
a:link .image{
    vertical-align: bottom;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


a:after .image{
        content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: solid 1px #1b1b1b;

    -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

}

---

如何才能使CSS样式正常工作？非常感谢！我喜欢编码，但有时会变得有点困难。我很乐意提供帮助，但我不明白您在这里想做什么。我们可以得到您想要得到的结果的图像吗

总之，一些一般性建议：

• 边界半径和框阴影不再需要前缀
• 您不需要在链接标记上指定：link
• 考虑使用“顶部：0；底部：0；左侧：0；右侧：0；”，而不是100%的宽度和高度

---

编辑：好的，现在我了解你的照片了

因此，问题在于：

a:after .image {...}

这样做，您就不会以：after伪元素为目标，而是一个.image元素，它将是它的子元素。因此这是毫无意义的。您应该做的是在链接本身上添加一个类（如果可能的话），或者使用选择器更精确地以它为目标，只需处理这个：after伪元素

如果这还不足以帮助你，我就给你举个例子。：）

---

编辑：好吧，我还是举了个例子：

---

如果你想将它与hover一起使用：

谢谢！我刚刚编辑了我的文章来指出这个问题。如果你需要更多帮助，我会举个例子。我举了个例子，你可以查看我的文章；）我仍然无法理解，但还是要谢谢你！我会再次尝试另一个例子和你的例子，直到我得到它。再次感谢！！！让我成功ear，如果您使用“foo.bar{}”，您将以.bar元素为目标，它是foo的子元素，而不是foo本身。如果您使用“foo:after.bar{}”，您将以.bar元素为目标，它是foo元素的“after”的peudo元素的子元素（而不是foo的子元素）。但是伪元素不能有任何子元素，因此它在html中找不到任何匹配项。此外，“content”属性应该直接作用于：after/：before。