在移动设备上隐藏图像

Question

我试图隐藏一个特定的图像，弄乱了我的移动设备网站的布局。我使用的是wordpress网站，我想利用这个功能的“自定义CSS插件”。

我已经将一些信息拼凑在一起，显然我必须使用以下内容来设置宽度分辨率为400像素的设备;

@media只有屏幕和（MAX-设备宽度：400像素）

现在我需要靶向特定图像，但是这是我需要一些指针。我知道要禁用图像，我可以使用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 */ 
} 

希望这一个特定的孩子帮助！