使用多个CSS文件调试CSS

在我们的应用程序中，我们使用Bootstrap并使用多个CSS文件。使用多个CSS文件调试CSS

最近，我遇到了在输入框周围创建边框的问题。输入类型CSS的边框在特定的CSS文件中被覆盖。

我试图使用Chrome DEV工具来确定哪个CSS文件的输入框正在选择（用于颜色），但由于某种原因，它不能识别正确的CSS文件。对于边框，形状和大小，它提到它是从父项继承的，但它从不提及哪一个是父级CSS文件。

是否有更好的工具正确指出组件正在使用的CSS？

你的问题是有道理的，是基本的，但它会帮助，如果你能提供从您认为这个问题是从＆也许你所看到的截图来了一些基本的CSS样本。 – JakeGould

我发现Chrome开发工具足够了。只要确保当你检查一个元素，你去侧面板查看应用到它的所有CSS（它显示应用和覆盖的，包括他们来自哪些文件） – ochi

是否有更好的工具正确指出组件正在使用的css？

Firebug很好&非常发达。但只适用于FireFox，对于基本的CSS调试目的来说这不应该是一件大事。一般来说，没有一种好的工具可以调试这样的事情。你将一直在从一个工具到另一个工具，以确保事情正确。这只是前端Web开发的本质。

但是一般来说，可能不需要甚至触摸父母的CSS来处理这个问题。只需定位CSS中的元素（如果尚未定位），并使用!important来强制您的新设置覆盖父类型中的其他元素。

然而，保持身体平衡，一个“！重要的”声明（分隔符令牌 “！”和关键字“重要”按照声明）优先在一个正常的声明。作者和用户样式表可能包含“！重要”声明，而用户“！重要”规则会覆盖作者“重要”规则。该CSS功能通过为用户提供对演示文稿的特殊要求（大字体，颜色组合等）控制，提高了文档的可访问性。

下面是一个示例代码，这将迫使outline: none所有input元素：

input { 
    outline: none; !important 
}

您甚至可以添加border: 0px solid;的组合以及：

input { 
    border: 0px solid; !important 
    outline: none; !important 
}

2014-06-07 19:52:19 JakeGould

不仅Firebug，但我也亲自发现Firefox devtools比Chrome devtools更容易，更直观。 – Filly

我试着使用Chrome DEV工具来确定哪个CSS文件的输入框正在拾取（对于颜色），但由于某些原因，它不能识别正确的CSS文件。对于边框，形状和大小，它提到它是从父项继承的，但它从不提及哪一个是父级CSS文件。

一般来说，Chrome Developer Tools会显示使用哪些.css文件，以及从哪些元素继承样式。

你能提供一个具体问题的例子吗？

enter image description here

2014-06-07 19:55:59 morkro

这不是一个答案。这是一条评论。 – JakeGould

抱歉，我无法发表评论。：/ – morkro

这实际上是一个答案。演示为什么chrome开发工具能够准确显示OP正在查找的内容，并询问是否有理由不满足需求 – ochi

回答