如何使用浏览器开发工具应用 CSS
已发表: 2021-11-25正在寻找使用一些 CSS 设置网站样式的方法？ 有不同的方法可以做到这一点。 在本指南中，我们将向您展示如何使用浏览器开发工具应用 CSS，并提供一些您可以做的事情的示例。
在开发应用程序或网站时，开发人员会使用各种各样的工具来帮助他们完成工作。 最受欢迎的工具之一是浏览器开发工具。 没有它，在网站上工作会更加复杂。
大多数浏览器都提供了自己的内置开发工具。 它们中的大多数相似，但有一些不同的选择。 考虑到近 66% 的用户使用 Chrome，在本指南中，我们将重点介绍
Chrome 开发者工具。 它是最完整的之一，并且由于其性能和多种功能而在浏览器中脱颖而出。
在开始讨论如何使用浏览器开发工具应用 CSS 之前，首先让我们熟悉一下 Chrome 开发工具以及您可以使用它做什么。
注意：我们将在这里解释一些概念，但要遵循本指南，我们建议您对 CSS 及其工作原理有基本的了解。
Chrome 开发者工具
首先，您需要在 Chrome 中打开该工具。 为此，有 3 个选项：
- 在您的关键字上按 F12
- 右键单击屏幕上的任意位置并选择检查
- 按用户头像旁边右上角的三点图标，然后转到更多工具 > 开发人员工具
这三个选项中的任何一个都将打开应该如下所示的 DevTools。 您的开发人员工具可能看起来略有不同，但元素是相同的。
如您所见，有几个选项卡，请确保您位于显示网站 HTML 输出的“元素”选项卡上。 请注意，该工具将获取有关当前窗口的所有信息，即打开 DevTools 时浏览器上的活动选项卡。
您可以同时打开多个开发人员工具窗口，每个窗口显示浏览器上不同选项卡的信息。
如何在浏览器开发者工具中查找 HTML 元素
如果您仔细查看工具中的元素，您会发现您可以通过单击大多数元素来打开它们。 最重要的是，当您将鼠标悬停在其他元素上时，嵌套在其他元素中的元素会在前端突出显示。
通过查看不同的元素，您可以看到 HTML 父元素。 您可以通过单击打开每个元素来深入了解 HTML 结构。 在大多数站点中，HTML 代码很长，因此如果您需要查找特定元素，可能会很乏味。 如果您要查找的元素深深嵌套在大量 HTML 父元素中，则更是如此。
但是，有一种更简单的方法可以找到特定元素。
寻找特定元素
只需右键单击要分析的元素并选择Inspect 。
当检查器打开时，该元素将被选中并在DevTools中突出显示。
正如您在上面的屏幕截图中看到的那样，我们点击了一个徽标，因此当我们在开发人员工具中检查元素时，该徽标的图像已经被选中并突出显示。 这有助于我们了解网站完整 HTML 源代码中元素的深度。
现在您知道如何使用开发人员工具选择特定元素，让我们更进一步，添加一些自定义 CSS。
实时编辑 CSS 脚本
如果您查看开发工具窗口的右侧，您将看到应用于所选元素的所有 CSS 规则，这些规则按继承排序。
继承是描述 CSS 功能的主要 CSS 概念之一。 如果您不完全理解它是什么，请不要担心，我们将在下一节中解释它。
要在开发工具上应用您自己的 CSS 规则，您需要在元素样式声明之后键入或粘贴它：
在本例中，按照我们的示例，我们更改了之前选择的徽标的宽度、背景颜色和边框。
您还可以在侧边栏上的任何 CSS 规则中插入脚本，而不是在element.style包装器上进行。
浏览器开发者工具上的 CSS 继承
您可能想知道如果您可以在其中任何一个上应用您的 CSS 代码并且没有任何区别，那么将所有这些 CSS 规则放在那里有什么意义。
如前所述，这些都是应用于按继承排序的选定元素的所有 CSS 规则。
继承概念描述了 CSS 如何应用于 HTML 文档。 基本上，它控制没有为给定元素的属性指定值时发生的情况。
如果您仔细查看下面的屏幕截图，您会发现侧边栏上的所有 CSS 选择器都针对同一个元素：您在主要部分中选择的元素。
如果您将两个或更多规则应用于同一元素，则将应用的规则是更具体的规则。 这将禁用继承行为，该行为适用于没有定义的属性。
在上面的截图中， <body>元素的background-color属性由以下规则给出：
body.custom-背景{
背景颜色：#d8d7e2；
} 这会覆盖适用于<body>的所有其他规则，因为它有一个更具体的选择器，其中包括.custom-background类。
如果您想了解有关 CSS 继承的更多信息，可以查看此文档。
现在您对它的元素有了更好的理解，让我们看看如何使用浏览器开发工具应用 CSS。
如何使用浏览器开发者工具应用 CSS 脚本
在使用开发工具并编写完 CSS 脚本后，您需要从开发工具中复制 CSS 代码并将其添加到您网站的 CSS 文件中。 在本节中，我们将逐步向您展示如何做到这一点。
1) 获取 CSS 选择器
首先，您必须抓住选择器。 打开开发人员工具并单击要编辑的 HTML 元素，使其突出显示。 然后，右键单击突出显示的元素并转到Copy > CSS selector 。
2) 优化选择器
在上面的截图中，我们复制到剪贴板的 CSS 选择器是：
.site-branding > div:nth-child(1) > span:nth-child(1) > img
在某些情况下，此选择器可能不起作用，因此您需要对其进行改进以使其更具体。 例如，您可以使用以下更具体的选择器，并将覆盖前一个：
div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo
3）复制CSS规则
一旦您自定义了选择器并确认它可以工作，请从开发工具的右侧栏中复制您需要的声明。
为此，请右键单击您添加到开发工具的 CSS 规则，然后选择Copy rule 。
4) 将您的 CSS 代码添加到您的网站
最后一步是将您刚刚使用浏览器开发工具创建的自定义 CSS 代码添加到您的网站样式文件中，将选择器和声明放在一起。
根据您的设置，可能有多种方法可以将您的自定义 CSS 包含在您的站点中。 许多插件和主题都提供了自己的 CSS 编辑器框，您还可以将脚本直接添加到主题的 CSS 文件中。 让我们来看看几个不同的选项。
4.1）主题定制器的附加CSS编辑器
使用主题定制器的附加 CSS编辑器应用 CSS 的简单方法。 这是 WordPress 默认为您提供的用于添加自定义 CSS 的选项，并且它存在于所有网站上。
要将您的 CSS 代码添加到您的网站，请在您的仪表板上，前往外观 > 自定义 > 附加 CSS。 将您的 CSS 规则粘贴到编辑器中并点击Publish 。
这种方法的优点是您不需要任何额外的工具，并且您可以在代码上线之前看到代码的实时预览。
4.2）子主题的CSS文件
如果您使用的是子主题，则可以将自定义脚本添加到style.css文件中。 如果您有大量 CSS 代码，这是一个不错的选择。
为此，请打开子主题的style.css文件并将您的 CSS 规则粘贴到那里。 根据您的子主题，该文件可能有不同的名称或可能有一些其他文件。 在任何情况下，请确保该文件具有.css扩展名并且您正在编辑正确的文件。
编辑子主题的 WordPress 文件的另一种方法是使用 WordPress 仪表板外观选项卡下的主题编辑器。
您在此处添加的 CSS 脚本的工作方式与将它们添加到主题定制器的方式相同，但它们的性能可能会稍好一些。
在浏览器开发者工具上检查 CSS 文件
在上一节中，我们已经解释了如何将 CSS 脚本添加到您的 WordPress 网站。 可以想象，您在开发者工具上看到的所有 CSS 规则都来自一个 CSS 文件。 这些文件可能由网站动态创建、从服务器加载或从客户端浏览器的缓存文件中创建。
如果您仔细观察，您会发现包含 CSS 规则的文件的名称显示在规则之后，在开发工具的 CSS 侧边栏上。
如果您单击文件名 ( style.css )，您将进入开发工具的样式编辑器屏幕，您将在其中看到所有活动的 CSS 文件及其内容。
这有助于更好地了解您网站上的所有 CSS 文件。
结论
总而言之，大多数浏览器都包含开发人员日常使用的非常强大的开发人员工具。 在本指南中，我们向您展示了浏览器开发工具的主要功能之一。 我们已经了解了如何在开发工具上查找特定的 HTML 元素以及如何实时编辑 CSS。 此外，我们还解释了 CSS 继承及其重要性。
最后，我们向您展示了如何使用浏览器开发工具逐步应用 CSS 脚本以及将其添加到您的网站的不同方法。
如果您觉得本教程很有趣，请在社交媒体上与您的朋友分享。 有关改进网站的更多有用指南，请查看以下文章：
- 如何使用 CSS 自定义 Divi 菜单
- 如何使用 PHP 和 CSS 编辑 WooCommerce 商店页面