CSS非表示のデータトグル

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="collapse"] { 
    display: none; 
} 

は、私が指摘しているようあなたがセレクタとしてdata-toggle属性を使用することができます：あなたが使用することができます

これは懸念やベストプラクティスの良い分離ではないということです。

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

a:last-child{ 
 
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 4

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