如何使用 Chrome Inspector 显示 jquery 插件的弹出 css

Question

我正在尝试让 Chrome 检查器向我显示 jquery 插件中使用的类名及其属性，以便我可以根据需要覆盖和调整它们。但是 Chrome 检查器 css 窗口不显示它。

我正在使用一个插件，当我点击一个文本框时，它会显示一个列表项的弹出窗口。 See jsfiddle

$('#example-1').timeselect({
   'step': 15,
    autocompleteSettings: {
        autoFocus: true
    }
});

我想更改突出显示的行背景颜色和文本大小，如下图所示

我在this 中阅读答案以查看 Chrome 检查器中的悬停 css 我需要检查窗口中的 .hov 样式。

我将它设置为什么元素状态并不重要。 Chrome css 窗口不会显示我尝试更改的 2 个属性的 css，即突出显示的行字体大小和背景颜色。它根本没有在窗口中显示那种灰色。它只允许我更改文本框的静态字体大小，而不是单击文本框并且悬停处于活动状态时的文本大小。

我查看了插件的javascript code on GitHub。没有参考。没有引用任何应用于它的 CSS 或样式。

下面给出的答案摘要：

1. jquery 插件在准备好的 DOM 上创建 html。在 Chrome 检查器中找到创建的 html。

2. 使用检查器突出显示相关的 html 创建元素，并记下当我直观地突出显示一行时动态插入到 html 中的 css 类名称。

3. 在 Chrome 的 css 面板窗口中单击 + 图标并添加在步骤 2 中标识的类名称。

4. 查看和调整特定类的css属性

Answer 1

在小提琴中，您可以检查输入框（单击以输入文本的位置）并观察单击和关闭时的 HTML 变化。如果您在打开和关闭时没有看到元素突出显示（这通常意味着元素正在更改，例如 display:none; 到 block 的样式），那么您可以开始将鼠标悬停在检查器中的元素上。

当您将鼠标悬停在检查器中的元素上时，您会看到要点亮的块。有时你想要的块包含在一个更大的块中，所以你必须遍历这个块（使用它旁边的黑色箭头打开元素）

您正在寻找<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1"... 此元素包含所有选择选项。

在下图中，我找到该块的方法是检查“基本示例”的实际输入。这向我展示了带有 id #example-1 的完全遍历的输入。然后，由于我单击了其他地方，实际选项被隐藏了，所以我再次单击输入以打开它们，我注意到检查器中发生了一些变化。所以，我只是在选项框打开时将鼠标移到检查器中的元素上。我看到 div（在检查器中以灰色突出显示）是选项的包含框，然后我只是从那里遍历。

TLDR;你要改变.ui-menu-item的背景