图像标签上的 ID 或类不起作用

Question

我正在尝试为网站定位一些图片，并且我为图片指定了不同的 ID，因此我可能会以不同的方式定位它们。当我开始定位时，在我的 css 上它不起作用。按 ID 或类别，

我将这些图像放在一个 div 中只是为了检查一切是否正常，并且我想很容易指向我想要使用的确切 img 标签。

代码如下：

<div class="resume">
    <a  href="#"><img style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/pdf.png" class="pdf" ></a>
    <a  href="#"><img id="word" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/mword.png" ></a>
    <img id="pline" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/line1.png" >
    <img id="wline" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/line2.png" >
</div>

.resume img 
{
    position:relative;
    top:100px;
}

.resume img .pdf 
{
    position: relative;
    top:500px;
}

因此，如果有人能在我出错的地方帮助我，我将不胜感激。谢谢！

Answer 1

img 和 .pdf 之间不应有空格。这意味着一个 img 标签包含一个（或多个）类 .pdf 的元素。 img.pdf 表示带有此类的 img 标签。

对于一个 id，您只需使用 #pline，没有必要使用 img#pline，因为 id 在页面上是唯一的，而 img #pline 如上所述是不正确的。

Answer 2

在您的情况下，元素和类之间不应有空格。即它必须是img.pdf。这些是寻找特定命名空间的 3 级选择器。

---

对于 EG： 以下仅将样式分配给具有class~="pastoral" 的 H1 元素：

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

鉴于这些规则，下面的第一个 H1 实例不会有绿色文本，而第二个会：

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

Answer 3

.resume img.pdf {
  position: relative;
  top:500px;
}