在移动设备上隐藏图像

Question

我正在尝试隐藏一个特定的图像，该图像会打乱我的移动设备网站布局。我正在使用一个 wordpress 网站，我想为此功能使用“自定义 CSS 插件”。

我已经拼凑了一些信息，显然我必须使用以下内容来定位宽度分辨率为 400 像素的设备；

@media only screen and (max-device-width: 400px)

现在我需要定位那个特定的图像，但这是我需要一些指针的地方。我知道要禁用图像，我可以使用 display: none;，但这仍然让我定位有问题的图像。

欢迎任何提示，不胜感激。

Answer 1

要做到这一点，使用 CSS，你可以试试这个：

假设您的 HTML 如下所示：

<div id="foo">
   <img src="bar.png" align="right">
   <img src="cat.png" align="right"> 
</div>

这些属性选择器由“开头”选择。

img[src^=bar] { css }
img[src^=cat] { css }

这些按“包含”选择。

img[src*="bar"] { css }
img[src*="cat"] { css }

或者您可以通过确切的 src 进行选择。

img[src="bar.png"] { css }
img[src="cat.png"] { css }

如果你想同时定位它们，那么你可以使用 div id。

#foo img { css }

如果要选择包含图像的 div 的第一个子项

#foo img:first-child {
    /* css */
}

如果您想定位包含 div 的特定子级

#foo img:nth-of-type(1) {
    /* css */
}

希望这会有所帮助！