關於a標籤顏色的探索

<!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>
相關文章
相關標籤/搜索