<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { color: green; } .red { color: red; font-size: 50px; } </style> </head> <body> <div class=""> <a href="#">這是a標籤,有href</a> <a>這是a標籤,沒有href</a> <span>這是文字</span> <div class="red"> <h2>我是標題</h2> </div> </div> <p>下面,我理一理有哪些狀況</p> <ul> <li>1. 設置body的顏色爲red, a標籤顏色不改變, 緣由是由於user agent的a自帶有 ':any-link'.權重爲10,覆蓋了a標籤繼承a標籤的樣式。爲何是user agent的樣式高於了開發者定義的樣式呢? 其實這裏,a繼承來的顏色和user agent的a的顏色不是同一級別的。由於它的顏色是繼承來的(也就是說,並非user agent的樣式高於了開發者定義的樣式, 若是要比較,是指定了a的color而不是從其餘地方繼承過來的color)。因此不能單純的比較樣式的優先級。若是要比較user agent 和 user 以及 author的優先級,是創建在同一元素以及同一級別。</li> <li>2. 若是直接設置a的顏色,a標籤顏色要改變, 緣由是author優先級比user agent優先級高.</li> <li>3. 若是沒有href, 那麼a標籤顏色要改變。緣由是沒有user-agent裏的':any-link'</li> </ul> </body> </html>