Question

有可能用css隐藏这个：<a data-toggle="collapse"></a>而不隐藏第一个<a>？只是用css？

<a href="edit.html">
   <i class="pull-left fa fa-lg fa-calendar-plus-o" aria-hidden="true"></i>
</a>

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
   <li>
      <a href="edit.html">
       <i class="pull-left fa fa-lg fa-calendar-plus-o" aria-hidden="true"></i>
      </a>
       <a data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse" class="">Collapse</a>
    </li>

Answer 1

您可以将data-toggle属性用作选择器，如此...

[data-toggle="collapse"] {
    display: none;
}

我必须指出，这不是关注和/或最佳实践的良好分离。

Answer 2

您可以使用css选择器：

a:nth-of-type(2){
display:none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
   <li>
      <a href="edit.html">
       <i class="pull-left fa fa-lg fa-calendar-plus-o" aria-hidden="true"></i>
      </a>
       <a data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse" class="">Collapse</a>
    </li>

Answer 3

＆＃13;

a:last-child{
display:none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
   <li>
      <a href="edit.html">
       <i class="pull-left fa fa-lg fa-calendar-plus-o" aria-hidden="true"></i>
      </a>
       <a data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse" class="">Collapse</a>
    </li>

＆＃13;

您可以使用：last-child引用最后一个标记

Answer 4

[data-toggle="collapse"] {
    display: none;
}

CSS隐藏数据切换

4 个答案: