為什麼 :hover 和多個相鄰兄弟選擇器會導致 Safari 和 Chrome 中出現錯誤？

帶有:hover 和多個相鄰兄弟選擇器的Safari 和Chrome 錯誤

在Web 開發中，使用:hover 偽類別和相鄰-兄弟選擇器通常受到Safari、Chrome、Opera 和Firefox 等主流瀏覽器的支援。例如，以下程式碼如預期運作：

a:hover + div {}

但是，當新增多個相鄰同級選擇器時，Webkit 瀏覽器（包括Safari 和Chrome）會表現出意外行為：

div:hover + a + div {}

在這種情況下，Webkit 無法如預期地套用樣式。

解決此錯誤的解決方法是在body 元素上使用樣式聲明來創建微妙的動畫效果：

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

此動畫沒有可見效果，但會觸發樣式重新計算，從而允許Webkit 瀏覽器正確套用:hover 和相鄰同級選擇器樣式。

以下是示範解決方法的範例：http://jsfiddle。 net/jalbertbowdenii/ds2yY/1/.

透過採用此技術，您可以克服 Webkit 錯誤並確保不同瀏覽器之間的行為一致。

以上是為什麼 :hover 和多個相鄰兄弟選擇器會導致 Safari 和 Chrome 中出現錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！