Как добавить разные css в один тег html?

Question

Я использую два тега iframe на своем сайте. я добавил CSS 1 тега

<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 и скрыть еще один. Как я могу это сделать?

Answer 1

Попробуйте эти селекторы:

iframe:first-child{ 
// styling 
} 

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

Answer 2

Вы можете использовать идентификаторы для этого, если у вас есть простая страница и не имеете слишком много стилей, чтобы поддерживать. Ниже тегов стиля указаны фреймы с определенными атрибутами идентификатора. Эти атрибуты идентификатора используются между тегами стиля, чтобы выбрать элемент 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>

Answer 3

Самый лучший способ, чтобы дать тот, который вы хотите, чтобы скрыть идентификатор или класс, а затем пусть CSS будет применяться к идентификатору (#your_id) или класса (.your_class). Таким образом, вместо написания iframe{.... можно было бы написать #your_id{... или .your_class{....

Answer 4

Вы должны добавить идентификатор или класс в вашем теге, как показано ниже код:

Добавить ID:

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

или

Add Класс:

<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>