2016-01-20 250 views
0

我試圖隱藏一個特定的圖像,弄亂了我的移動設備網站的佈局。我使用的是wordpress網站,我想利用這個功能的「自定義CSS插件」。在移動設備上隱藏圖像

我已經將一些信息拼湊在一起,顯然我必須使用以下內容來設置寬度分辨率爲400像素的設備;

@media只有屏幕和(MAX-設備寬度:400像素)

現在我需要靶向特定圖像,但是這是我需要一些指針。我知道要禁用圖像,我可以使用display:none;但是仍然讓我將目標映射到相關圖像。

任何提示將受到歡迎,非常感謝。

回答

0

要做到這一點,利用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 */ 
} 

希望這一個特定的孩子幫助!