2015-05-14 88 views
0

我在我的網站中使用了兩個iframe標記。 我添加CSS 1個標籤如何添加不同的CSS到一個HTML標籤?

<style> 
iframe{ 
    opacity: 0; 
    border: 0px none transparent; 
    position: absolute; 
    top: 300px; 
    left: 200px; 
    height: 300px; 
    width: 250px; 
    filter:alpha(opacity=0); 
} 
</style> 

但兩者iframe s爲隱藏。

我想顯示1個iframe並隱藏另一個。我怎樣才能做到這一點?

+1

您適用於所有iframe的CSS,分離出使用'class'或'id'。你的'opacity:0;'產生問題,所以兩個iframe都不可見。 – Sachink

+0

將id添加到您希望樣式申請的iframe,並通過該id「#myIframe」來定位iframe – Huangism

回答

0

嘗試這些選擇:

iframe:first-child{ 
// styling 
} 

iframe:last-child{ 
// styling 
} 
iframe:nth-child(1){ 
// styling 
} 
+0

如何使用該樣式? –

1

可以使用的ID爲這個,如果你有一個簡單的頁面,並沒有太多的風格,以維護。樣式標籤下面是定義了ID屬性的iframe。這些ID屬性用於樣式標記之間,以便按ID選擇要設置樣式的iframe元素。

<style> 
 
    /* Using ID selector #iframeOne */ 
 
    #iframeOne { 
 
    opacity: 0; 
 
    border: 0px none transparent; 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 200px; 
 
    height: 300px; 
 
    width: 250px; 
 
    filter:alpha(opacity=0); 
 
    } 
 
</style> 
 

 
<!-- Give ID to iframe you want to style. Here it's iframeOne --> 
 
<iframe id="iframeOne"></iframe> 
 

 
<iframe id="iframeTwo"></iframe>

0

最好的辦法是給你要隱藏的ID或類,然後讓CSS應用於ID(#your_id)或類(.your_class的一個)。因此,而不是寫iframe{....,你會寫#your_id{....your_class{....

0

你應該在你標籤像下面添加代碼ID或類別:

添加ID:

<iframe id="iframe-1"></iframe> 
<iframe id="iframe-2"></iframe> 

加入類別:

<iframe class="iframe-1"></iframe> 
<iframe class="iframe-2"></iframe> 

以下CSS:

<style> 
    #iframe-1, 
    .iframe-1 { 
      /* Your code here */ 
    } 
    #iframe-2, 
    .iframe-2 { 
      /* Your code here */ 
    } 
</style> 
相關問題