有没有办法找到我的HTML代码使用的所有CSS代码？

Question

我想查找以下HTML代码使用的所有Bootstrap CSS代码。我可以用什么工具或方法来做到这一点？我更喜欢文本/代码编辑器。我不想手动搜索。这需要太多时间。

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
     aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"><b>Test</b></a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="/create"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Browse <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Culture</a></li> 
      <li><a href="#">Geography</a></li> 
      <li><a href="#">Health</a></li> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Mathematics</a></li> 
      <li><a href="#">Nature</a></li> 
      <li><a href="#">People</a></li> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Religion</a></li> 
      <li><a href="#">Society</a></li> 
      <li><a href="#">Technology</a></li> 
     </ul> 
     </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
     </div> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
     {{#if user}} 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img class="img-circle" src="/images/profile_photo.jpg" width="20" height="20"> {{username}} <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="/profile">My Profile</a></li> 
      <li><a href="/settings">My Settings</a></li> 
      <li><a href="/logout">Logout</a></li> 
     </ul> 
     </li> 
     {{else}} 
     <a class="btn btn-default navbar-btn" href="/login">Log In</a> 
     <a class="btn btn-primary navbar-btn" href="/signup">Sign Up</a> 
     {{/if}} 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 1

替代idleberg的答案。 而不是编程方式，你可以使用这个Firefox插件扫描（未）使用的CSS代码：https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Answer 2

看看uncss。它扫描用过的元素和类的静态HTML页面，并编译一个简化的CSS文件。它可以集成在您的Gulp或Grunt任务中。