Question

假设我在现有网站中嵌入了一些HTML代码。我想知道已经有哪些CSS类。目前我可以这样做：

查看页面的来源
搜索包含.css文件的链接
浏览这些内容，直到找到有用的课程

这很乏味，而不是详尽无遗。

什么是更好的方法？

编辑您也可以在Chrome中执行此操作：

检查元素
选择“资源”标签
导航至Frames /../ Stylesheets
查看各个样式表的内容

我想我正在寻找的是更高级别，可用的CSS样式的解释视图：不仅仅是CSS文件的内容。因此，如果一个样式在多个地方定义相同，我只想看两次。如果两个不同的样式应用于同一个元素，我想要看到两个并排。

我们假设我不能通过嵌入代码来做到这一点。

Answer 1

在Chrome中按F12并选择放大镜。在IE中它也是F12然后选择一个小箭头。 Firefox具有类似的功能，或者您可以下载Firebug，这对Web开发人员非常有用。

Answer 2

我认为firefox的Web Developer插件可能对你有所帮助。您可以从 here添加它。

Answer 3

W3 CSS验证工具http://jigsaw.w3.org/css-validator/将在错误样式列表下方显示您指定的网页可用的所有可用CSS样式。

Answer 4

在页面正文的结束标记之前立即复制此代码：我从这里得到了代码：http://snipplr.com/view/6488/ 在Chrome中测试

//CODE    
<div id="allclasses" style="text-align:left">
</div>   
<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
    var tag = allTags[tg];
    if (tag.className) {
     var classes = tag.className.split(" ");
     for (var cn = 0; cn < classes.length; cn++){
     var cName = classes[cn];
     if (! classNames[cName]) 
         {
       classNames[cName] = true;
     }
   }
    }   
}
var classList = [];
for (var name in classNames) 
    classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>

用于查找网页中可用的CSS样式的工具

4 个答案: