如何定位哪个css包含用于元素

Question

我想在JSP页面中为某些文本使用与H2元素相同的颜色。但是页面中包含7个样式表，从视图源可以看出：

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/css/menu.css"/>
<link rel="stylesheet" type="text/css" href="/css/lib/jqModal.css"/>
<link rel="stylesheet" type="text/css" href="/css/en-US/localized.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-theme.css" />

如何确定H2元素使用哪种样式表？

Answer 1

顾名思义，CSS - Cascades。因此，只要定义了h2，浏览器就会获取规则并将其应用于页面。所以，假设我们已经包含了一些样式表，就像我在我的应用程序Soceall中所做的那样，它有很多插件CSS而不是我自己的。

如果您在Chrome的开发工具检查器中看到，您可以找到所有级联规则，例如，我在此处选择了<h4>：

它来自三个样式表，并且还显示行号：

<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.1.1/css/bootstrap-colorpicker.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation/master/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.8.0/css/bootstrap-markdown.min.css" />

所以，在这里：

点击链接，其中显示style.css:277也会转到样式表上的声明。您还可以编辑文件并查看更改。