1

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

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

这很乏味，而且并不详尽。

有什么更好的方法？

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

  1. 检查元素
  2. 选择“资源”选项卡
  3. 导航到框架/../样式表
  4. 查看单个样式表的内容

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

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

4

4 回答 4

1

我认为 Firefox 的 Web Developer 插件可能会对您有所帮助。您可以从这里添加它。

于 2012-05-30T08:25:17.003 回答
1

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

于 2012-05-29T23:45:12.863 回答
1

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

于 2017-03-10T22:15:57.843 回答
0

在页面正文的结束标记之前复制此代码：我从这里获取代码：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>
于 2012-05-30T00:00:52.040 回答