Question

这是我正在做的事情，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>David Paint</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body { background: linear-gradient(to right, #00e5ff, #00e676); margin: auto; max-width: 736px; font-size: 0px }
            #icons img { width: 36px }
        </style>
    </head>
<body>

<span id="icons">
    <a href="david">
        <img title="David" src="david.svg">
    </a>
    <a href="paint">
        <img title="Paint" src="paint.svg">
    </a>
</span>

</body>
</html>

如何在不添加更多类或ID的情况下使用 CSS选择器定位<img title="Paint" src="paint.svg">？当我将img标记包装在a标记中时出现问题。在此之前，我可以定位最后img个标签没问题。

谢谢！

Answer 1

您仍然可以执行此操作，只需定位最后一个a元素而不是最后一个img元素。

#icons a:last-of-type img {
 /* Your styling here */
}

Answer 2

您可以使用:nth-child()伪选择器

此处img是a的孩子，因此我们需要将:nth-child应用于a，然后定位img。如果我们想要在第一个超链接（<a>）内定位图像，那么我们需要使用:nth-child(1)

#icons a:nth-child(1) img{
 display:none;
}

要定位第二个超链接图像，我们需要使用:nth-child(2)

#icons a:nth-child(2) img{
     display:none;
}

Fiddle

您可以参考csstricks的this文章，了解更多信息：nth-child（）伪选择器

Answer 3

属性选择器用于选择具有以指定值开头的指定属性的元素。

[title~= Paint] {border:1px solid #000}

Answer 4

您可以使用:last-child()选择器：

#icons a:last-child img{
   border:1px solid red;
}

这是小提琴代码：https://jsfiddle.net/eao47zr3/

Answer 5

您可以使用以下每种方式

#icons img[title = 'paint'] { ... }
#icons img[src = 'paint.svg']{ ... }
#icons a:last-child img { ... }
#icons a:nth-child(2) img { ... }

邻居的CSS选择器

5 个答案: