CSS скрывает все элементы из класса, за исключением первого в IE6

Я ищу способ скрыть все элементы определенного класса - кроме первого. Я действительно понимаю, что есть способы сделать это в javascript, но эта функциональность будет для тех без javascript включен - поэтому почему я ищу CSS только решение, если оно есть.CSS скрывает все элементы из класса, за исключением первого в IE6

<div class="foo">Content 1</div> //not hidden 
<div class="foo">Content 2</div> //hidden 
<div class="foo">Content 3</div> //hidden

я могу добиться этого с помощью first-child pseduo-класс, как:

.foo:first-child { 
    display:block; 
} 
.foo { 
    display:none; 
}

Но так как IE6 не поддерживает этот pseduo-класс, он не будет работать. К сожалению, я не могу отменить поддержку IE6 (вздох), поэтому я ищу способ достичь этого, не используя этот конкретный селектор.

Спасибо!

источник

2012-03-11 Zar

Я бы очень осторожно просил решение известного недостатка (IE6 не поддерживал ': first-child' плюс множество других полезных вещей), которые могли бы существенно увеличить объем накладных расходов (библиотека, альтернативная настройка, и т. д.), когда простой специализированный класс может выполнить тот же эффект. jQuery мог [помочь по-своему] (http://www.thebrightlines.com/2010/01/31/hack-how-to-enable-first-child-in-ie6/), но это тяжелая стоимость, если вам не нужен jQuery. –

Я полностью согласен с вами, однако, я пытаюсь обеспечить максимально возможный UX для пользователей IE6 с отключенным javascript (yiekes, может ли это ухудшиться?). Кто-то может сказать, что это будет невыполнимая задача .. :-D. Спасибо за ваш вклад! – Zar

используйте класс того же стиля, что и резерв. так как я не уверен, поддерживает ли IE6 цепочку (насколько я знаю, это не так), используйте контейнер для указания.

/*hide all foo*/ 
.container .foo { 
    display:none; 
} 

/*as suggested, might as well do this and drop the others altogether*/ 
.container .first-child { 
    display:block; 
}

<div class="container"> 
    <div class="foo first-child">Content 1</div> //not hidden 
    <div class="foo">Content 2</div> //hidden 
    <div class="foo">Content 3</div> //hidden 
</div>

источник

2012-03-11 19:01:11 Joseph

Предпочитаете решение, которое не требует дополнительных классов, но я предполагаю, что, поскольку я имею дело с IE6, это всего лишь мечта. Большое спасибо за ваш ответ! – Zar

Вам нужно разделить правило на два, поскольку IE (и другие не-багги-браузеры, такие как IE7 и WebKit) должны игнорировать целые правила, содержащие непризнанные селекторы. Но вы можете также отказаться от селектора ': first-child' вообще и использовать класс. – BoltClock

@BoltClock имеет смысл: D – Joseph

Это все, что я могу думать ...

<div class="foo">Content 1</div> 
<!--[if IE 6]><div style="display:none"><![endif]--> 
<div class="foo">Content 2</div> 
<div class="foo">Content 3</div> 
<!--[if IE 6]></div><![endif]-->

ИЛИ

<div class="foo">Content 1</div> 
<noscript><div style="display:none"></noscript> 
<div class="foo">Content 2</div> 
<div class="foo">Content 3</div> 
<noscript></div></noscript>

Пример: http://jsfiddle.net/FkCzB/

источник

2012-03-11 19:04:22 henryaaron

Наименее оптимальное решение. Да, пожалуйста, только если нет другого пути. ':)' Кроме того, я не думаю, что это фактически разрешает реальную проблему (я не думаю, что OP хочет больше разметки). –

@JaredFarrish Без добавления классов или JavaScript, это все, что я могу придумать ... – henryaaron

IE6 заставил нас всех забыть о нашей нравственности и просить прощения за наши грехи, так что, это «есть» подход, но нет.Кто-то должен нажать кнопку «самоуничтожение» на этом старом зверю. –

С данной разметкой решение CSS только для IE6 невозможно. Невозможно настроить таргетинг на первого ребенка, только общее правило для всех потомков.

источник

2012-03-11 19:07:41 dave

CSS скрывает все элементы из класса, за исключением первого в IE6

ответ

Смежные вопросы