2013-07-03 8 views
2

У меня есть несколько DIV как в следующем,Как выбрать элементы iframe с помощью css?

<div id="text-2"> 
<div class="textwidget"> 
<iframe id="widget-0" src=""></iframe> 
<iframe id="widget-1" src=""></iframe> 
</div> 
</div> 

<div id="text-3"> 
<div class="textwidget"> 
<iframe id="widget-2" src=""></iframe> 
<iframe id="widget-3" src=""></iframe> 
</div> 
</div> 

В приведенном выше DIV-х, я хочу, чтобы ограничить (блок/нет) на плавающие фреймы для конкретной страницы с помощью CSS.

Для примера:

(я). Если я нахожусь на домашней странице,

Я хочу отображать iframe типа «widget-0» и «widget-2», а оставшиеся iframes «widget-1» и «widget-3» должны быть отключены ,

(ii). Если я нахожусь на внутренней странице,

Я хочу отобразить iframe типа «widget-1» и «widget-3», а остальные iframes «widget-0» и «widget-2» должны быть отключены ,

Как это сделать с помощью css. Может ли кто-нибудь помочь мне в этой небольшой CSS-настройке.

CSS Selector Пример абзаца тег:

div#test p:first-child {text-decoration: underline;} 
div#test p:last-child {color: red;} 

Примечание:

Функция Iframe идентификаторы являются динамическими, а не статична. Выше - простой пример.

ответ

1

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

#widget-2 { display: none } 

Если вы хотите, чтобы это было зависело от страницы вы находитесь в настоящий момент, вы можете добавить класс к элементу тела который указывает страницу. При этом, вы можете включить/отключить IFrames так, как вы хотите:

<body class="home"> 
.home #widget-2 { display: none } 

В приведенном выше примере, теперь второй виджет только отключается на домашней странице.

+0

Виджет идентификаторы являются динамическими, я просто приводил пример, как это. Если я хочу скрыть последний элемент и отобразить первый элемент, что мне делать с помощью селектора css для iframe. –

+0

Вы не можете использовать: iframe: first-child или iframe: nth-child? –

+0

да, он не применяет эти стили –

1

Сначала нужно добавить класс тела в домашних условиях и внутренний (например, «домашняя страница» «внутренней страницы»)

iframe { display: none } 

.home-page iframe#widget-0, .home iframe#widget-0 { display:block } 

.inner-page iframe#widget-1, .home iframe#widget-3 { display:block } 
Смежные вопросы