Скрыть определенные элементы из html с помощью css

Question

У меня есть html-файл и вам нужно скрыть некоторые элементы. Мой код выглядит так,

<div class="test"> 
    <a href="#" class="demo">Demo1</a> 
</div> 
<div class="test"> 
    <a href="#" class="demo">Demo2</a> 
</div> 
<div class="test"> 
    <a href="#" class="demo">Demo3</a> 
</div> 
<div class="test"> 
    <a href="#" class="demo">Demo4</a> 
</div> 

Я хочу, чтобы скрыть demo2 и Demo4 ссылки с помощью CSS. Пожалуйста, помогите мне сделать это :)

Answer 1

Вы можете использовать nth-of-type:

:nth-of-type CSS псевдо-класса соответствует элементу, у которого есть + b-1 братья и сестры с тем же именем элемента перед ним в дереве документов, для получения n положительное или нулевое значение для n и имеет родительский элемент.

.test:nth-of-type(2) a, .test:nth-of-type(4) a{ 
 
     display:none; 
 
    }

<div class="test"> 
 
    <a href="#" class="demo">Demo1</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo2</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo3</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo4</a> 
 
</div>

Или

nth-child с переключателем odd, если вы хотите, повторяющийся узор из скрывающихся элементов

:nth-child(an+b) CSS псевдо-класс совпадает с элементом, имеет a + b-1 братья и сестры перед ним в дереве документов, для данного положительного или нулевого значения для n и имеет родительский элемент.

.test:nth-child(even) a { 
 
    display: none; 
 
    }

<div class="test"> 
 
    <a href="#" class="demo">Demo1</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo2</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo3</a> 
 
</div> 
 
<div class="test"> 
 
    <a href="#" class="demo">Demo4</a> 
 
</div>

Answer 2

Используйте nth-child выбрать div, а затем изменить его a к hiddenhttp://jsfiddle.net/8gh7js6a/

.test:nth-child(2) a { 
visibility:hidden; 
} 
.test:nth-child(4) a { 
visibility:hidden; 
}