性能上*過渡CSS的：鏈接，*：走訪，*：懸停，*：活躍，*：重點

我在看下面的樣式表片段：性能上*過渡CSS的：鏈接，*：走訪，*：懸停，*：活躍，*：重點

*:link,*:visited,*:hover,*:active,*:focus { 
    transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
}

，不知道對性能的影響是什麼特別是在移動設備上？像「.ClassName：hover」這樣更具體一些，還是性能差別沒有問題？請您指教？

來源

2013-10-22 edbras

轉換是基於每個元素定義的。您的選擇器可以很容易地簡化爲'*'，只要您在這些狀態的相應屬性中定義了一些更改，那麼您分配的過渡將適用於任何這些僞類。 – BoltClock

首先我想知道你爲什麼要使用的你想你的頁面上的每個環節都應該在:hover，:active狀態被分配transition顏色，border-color ....？因爲這將適用於所有的元素，當hovered，focused，那裏的link和visited將被應用到a標籤。

如果你想把上述樣式應用到的鏈接，你應該使用

a:link, a:visited ...

此外，當您使用*，這將是對你的網頁昂貴的選擇。所以只有在需要時才使用它。

^{1. Good Read For Selector Performance}
^{2. Testing Page Efficiency}

性能肯定會下降，使用特定的（不超過特定的）選擇將是一個更好的選擇相比， *，雖然我仍然覺得你將使用的選擇器不是你所需要的，你必須定位爲a元素而不是所有元素。

來源

2013-10-22 11:27:37

我在交付的作品中遇到過它，並且在同一個地方徘徊......謝謝.. – edbras

@edbras nah，如果您使用類似'* {margin：0;填充：0; outline：0;}'沒問題，但是不使用帶'*'的僞類。 –

任何使用*選擇的使繪製到顯著更長的時間，爲每個頁面上的元素將匹配一個額外的項目，一個是它的選擇是不足夠具體，以需要更多的處理能力來發現。它增加了CSS文件的解析時間，以及渲染頁面本身之前的延遲。瀏覽器在某種程度上有辦法彌補代碼，但即使在更好的瀏覽器上，它仍然會很痛苦。

在你的情況下，你選擇的樣式涉及僞類懸停，活動等等。這些都是基於事件的，所以你不僅要通過整個文檔閱讀超過必要的內容，你基本上是對它們有約束力的事件，這將需要存儲在內存中。

添加到該樣式本身就是一個過渡，而且也當這些事件被稱爲需要額外的處理能力。

此外，將應用到僞類的轉換意味着它實際上不會工作，因爲直到背景顏色已經改變，纔會應用轉換，除了[href]項目從*：鏈接選擇器匹配它。

此代碼是便宜得多，而且會實現什麼，似乎你想做的事：

a[href] { 
     transition: color .25s linear, background-color .25s linear, border-color .25s linear; 

} 

a[href]:hover, a[href]:active, a[href]:focus { 
    background-color: /* New colour */ 
    border-color: /* New colour */ 
    color: /* New colour */ 
}

即使是這樣，我有理由相信，你可能不需要關注的焦點，也許活躍僞類。

來源

2013-10-22 11:41:00

感謝您對事件監聽器綁定的解釋，清除。 – edbras

性能上過渡CSS的：鏈接，：走訪，：懸停，：活躍，*：重點

回答

性能上*過渡CSS的：鏈接，*：走訪，*：懸停，*：活躍，*：重點

回答

相關問題

性能上過渡CSS的：鏈接，：走訪，：懸停，：活躍，*：重點