如何在html中找到类定义？

Question

我是网络设计新手。制作我的第一个网站，这真的很复杂。我试图查看我喜欢的其他网站，并从中复制一些小东西。这就是为什么它很难，我无法理解代码。反正，

如果我下载了一个示例网站模板并在notepad ++中打开index.html，我会看到以下内容：

    <a href="http://www.twitter.com/johndoe"  target="_blank" class="twitter"></a>

如何找到定义class="twitter"的位置？我猜它可能在style.css中，如果有多个css和js怎么办？

Answer 1

如果您使用的是Chrome，请右键点击该元素，然后选择＆＃34;检查元素＆＃34;。

开发工具＆＃34;样式＆＃34;面板显示CSS声明的来源：

其他浏览器也类似。

Answer 2

课程实际上并未定义＆＃39;。它只是对元素进行分类的属性。

然后可以在CSS中使用该属性将特定样式应用于元素。它也可以在JavaScript中用于查找元素并对其应用一些功能。

但是，完全有可能一个元素具有在JavaScript或CSS中无处发生的类属性。

在开发人员工具中，您可以看到应用于元素的样式。通过每个样式，您还可以看到CSS文件的来源，包括被其他样式覆盖的样式。

但是，并没有给你所有的课程参考！如果CSS的样式为div.twitter，则不会将其应用于此元素。同样，a.twitter:hover仅在元素悬停时应用。所以浏览开发工具不会给你所有对某个类的引用。最好（唯一）的方法是只查看所有CSS文件的来源并搜索它们。

Answer 3

使用Chrome或Safari开发工具，您可以选择该元素，并且您将在检查器中看到定义了每个应用规则的文件。

编辑：

我认为Firefox开发工具也会显示这一点。

Answer 4

在浏览器中打开页面，如Chrome或Firefox，右键单击并检查元素，您应该看到源代码，在那里您可以看到该类。

但是，如果你想了解webdevelopment。检查指南，并尝试免费课程，如http://www.codeacedemy.com我觉得它更有效 只需从其他网站复制粘贴

http://www.codecademy.com/en/skills/make-a-website

http://www.codecademy.com/en/skills/make-an-interactive-website

http://www.w3schools.com

Answer 5

奇怪的是，我找到了一个解决方案：

我们现在知道你已经下载了整个网站，很棒，所以除了在Chrome / FF / IE中打开它（是的，这也有效，不要忽视那些要求我们设置它的最勇敢的探险家默认情况下）并从＆＃34; Dev Tools＆＃34;中检查，我们可以在Sublime Text 3中打开HTML文件，然后将鼠标悬停在一个类上;你会看到这样的东西：

现在您可以看到所有定义（更好地说＆＃34;出现＆＃34;，因为它只在所有css和js文件中进行简单搜索;但是比手动更快查看搜索）