如何定位哪個css包含用於元素

Question

我想使用與H2元素相同的顏色作爲JSP頁面中的某些文本。但也有包含在第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也會帶你到樣式表的聲明。您也可以編輯文件並且看到變化。