是否可以使用浏览器的开发人员工具搜索所有出现的属性？

Question

我正在调试我的网站，我希望我可以通过所有样式表搜索所有出现的属性。

例如，我希望我能找到属性color: #fff;的所有实例，并从中快速浏览选择器和对应的样式表。

这可能吗？

Answer 1

（据我所知）不可能通过 F12 Developer Tools 搜索特定的选择器。话虽如此，很有可能添加覆盖现有选择器的通用规则。

根据您要修改其样式的 exact 元素，您可以使用非特定的CSS选择器来定位所有这些元素，并应用一个覆盖任何现有规则的规则规则。例如，span将定位所有 <span>标记，无论ID和类如何。您可以使用 universal (*) selector 定位任何元素。

然而，应该注意的是更多的＆＃39;泛型＆＃39;你是，不那么具体的＆＃39;你是（这是有道理的）。这意味着如果您有任何其他更具体的规则，它们将覆盖您的通用规则。因此，您希望将通用规则与!important declaration结合使用。

以下是一个例子：

＆＃13;

＆＃13;

span {
  color: red;
  font-size: 20px; /* More specific than the * selector */
}

.more {
  color: blue; /* Will override span */
}

* {
  font-size: 40px;
  color: green !important; /* Maximum specificity; override anything */
}

＆＃13;

<span>One</span>
<span class="more">Two</span>
<div>Three</div>

＆＃13;

＆＃13;

＆＃13;

在上面，所有<span>个元素都是红色的。然后<span class="more">变成蓝色，因为它有一个更具体的选择器。虽然*是较少特定选择器，但将声明!important添加到color规则会覆盖前两种颜色集。

请注意，上述内容仅应用于测试;你几乎不会想要将*这样宽泛的选择器用于制作。另外，请避免在测试之外使用!important声明，而是使用 CSS specificity 。

您可以暂时将规则直接添加到样式表，或者最好通过F12开发人员工具添加客户端。使用F12开发人员工具甚至可以通过在中间放置一条线来展示何时覆盖规则（如上例所示）。规则从最具体到最不具体显示。

以上示例中的<span class="more">在此处突出显示：