CSS показать/скрыть следующие элементы

Question

Я хотел бы, чтобы скрыть второй id со значением my2 с помощью CSS:

<div class="node1"> 
    <div class="xxx"> blablabla </div> 
</div> 
<div id="my2"> 
    <div class="xxx"> blablalbla </div> 
</div> 
<div class="node2"> 
    <div class="xxx"> blablabla </div> 
</div> 
<div id="my2"> 
    <div class="xxx"> blablalbla </div> 
</div> 

Можно ли, чтобы скрыть второй my2div?

E.g.

.node2 ? #my2 { 
    display:none; 
} 

Спасибо!

Answer 1

Чтобы настроить объект # my2 после .node2, вам нужно добавить знак +.

.node2 + #my2 { 
    display: none; 
} 

Но, как упоминалось ранее, использование нескольких идентификаторов является недопустимой разметкой.

Answer 2

это скроет #my2, который сразу же после .node2

.node2 + #my2{ 
    display:none; 
} 

ПРИМЕЧАНИЕ: Не используйте тот же идентификатор для нескольких элементов

Answer 3

Да возможно:

Использование ~ вы можете выберите всех братьев и сестер с этим классом (id ваш случай).

.node2 ~ #my2{ 
    display:none; 
} 

Вы также можете использовать + для выбора немедленного родственный.

.node2 + #my2{ 
    display:none; 
} 

Надеется, что это помогает!

Answer 4

Link каждый buttonid каждому showid IE: #button1 ссылки на #show1. Используйте селектор ~ в своем CSS, создайте ассоциацию. Затем переключите display между none и block.

Demo

HTML

<a id="button1">Button 1</a> 
    <a id="button2">Button 2</a> 
    <a id="button3">Button 3</a> 

    <div class="text"> 
    <div class="hidden text" id="show1">This is 1</div> 
    <div class="hidden text" id="show2">This is 2</div> 
    <div class="hidden text" id="show3">This is 3</div> 
    </div> 

CSS Используйте селектор ~, чтобы ссылаться на каждый id

CSS

.hidden { 
    display: none; 
} 

#button1:hover ~ .text #show1 { 
    display: block; 
} 

#button2:hover ~ .text #show2{ 
    display: block; 
} 

#button3:hover ~ .text #show3{ 
    display: block 
} 

.text { 
    position: relative; 
    top: 10px; 
} 

ПРИМЕЧАНИЕ. Вы можете использовать <div> вместо <a> для кнопок, если хотите.