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>

我想使用css隐藏Demo2和Demo4链接。请帮助我这样做：）

Answer 1

您可以使用nth-of-type：

:nth-of-type CSS伪类匹配具有+ b-1的元素在文档树中具有相同元素名称的兄弟姐妹，对于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伪类匹配具有的元素对于给定的积极因素，在文档树中它前面有一个+ 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更改为hidden http://jsfiddle.net/8gh7js6a/

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

使用css隐藏html中的特定元素

2 个答案: