我有一個導入超過10個外部CSS文件的網頁。我使用過Chrome開發人員工具來檢查元素,並嘗試測量網頁使用的是哪些css文件。最初加載頁面後,我瀏覽了每個元素以查看它引用的CSS。哪些CSS文件影響網頁?
的問題是,有JavaScript功能它增加了類的某些元素,我不知道如何複製所有的狀態。有沒有辦法確定哪些css文件對網頁沒有影響?
我有一個導入超過10個外部CSS文件的網頁。我使用過Chrome開發人員工具來檢查元素,並嘗試測量網頁使用的是哪些css文件。最初加載頁面後,我瀏覽了每個元素以查看它引用的CSS。哪些CSS文件影響網頁?
的問題是,有JavaScript功能它增加了類的某些元素,我不知道如何複製所有的狀態。有沒有辦法確定哪些css文件對網頁沒有影響?
所有的CSS文件影響的網頁,但最後的選擇是唯一一個影響到的元素。
例如,如果我使用瞭如下的CSS文件:
<head>
<link rel="stylesheet" url="css/style1.css" media="screen">
<link rel="stylesheet" url="css/style2.css" media="screen">
</head>
而且這裏的風格:
STYLE1 CSS
a { color: black; }
藍紫魅力CSS
a {
text-decoration: none;
color: blue;
}
什麼顏色會有鏈接?黑色並且沒有下劃線,因爲最後一個color
屬性位於最後一個CSS文件中,最後一個CSS文件中有text-decoration
屬性。
獅子座!
如果您的網頁已啓用JavaScript生成動態內容,那麼你就可以永遠不知道一個給定的CSS規則是否會影響頁面上的東西。瀏覽器加載所有CSS規則(按照優先級規則排序),因此所有CSS文件在某些時候可能會對頁面內容產生一些影響。
如果你的頁面只是靜態內容,那麼它就成爲一個爭論點,但是如果你的頁面在某些時候加載了一個帶有一些新內容的模式窗口,那麼就沒有辦法知道你認爲的那些CSS文件中的一個是不是正在使用的內容將適用於該新內容。
最簡單的解決方案可能是除去外部CSS文件,看看會發生什麼。 – IanPudney
不重複;該答案不涉及JavaScript。 – IanPudney
@quinxorin我在這裏看到的唯一問號在最後一句和標題上。 – lifetimes