如何更改使用css類的鏈接的字體顏色？

-1

我正在嘗試更改頭類中鏈接的字體顏色。我嘗試使用下面的代碼，但它影響了頁面上的所有鏈接。我嘗試了不同的安排，似乎無法找出正確的方法。如何更改使用css類的鏈接的字體顏色？

CSS代碼

#amp-wp-header a:active, a:visited { 
    color:#ffffff; 
} 
a:hover, a:focus { 
    color:#ffffff; 
}

HTML代碼

<header id="#top" class="amp-wp-header"> 
    <div> 
    <a href="http://example.com">Title </a> 
    </div> 
</header>

來源

2017-01-02 Eric

將您的頁面ID包含在您的CSS選擇器中 –

您在CSS中使用過''amp-wp-header'''，但在您的標記中''amp-wp-header'''是一個類使用'''.amp-wp-header'''。 – aavrug

類以CSS中的（。）開頭，而ids以（＃）開頭，您在上面的代碼中混淆了這兩個類。 – 2017-01-02 06:30:18

如果你不關心具體的鏈路狀態，簡單地做：

.amp-wp-header a { 
    color:#ffffff; 
}

與問題你的做法是， mma分隔符用於指示單獨的選擇器。

當你這樣做：

.amp-wp-header a:active, a:visited { 
    color:#ffffff; 
}

你說：

指定這個顏色給所有a:active elements下.amp-wp-header
這種顏色分配給所有a:visited elements（這一個標籤在整個文檔）

來源

2017-01-02 06:30:14

試試看這個代碼，

<header id="#top" class="amp-wp-header"> 
    <div class="spl-for-link"> 
    <a href="http://example.com"> 
    Title </a> 
    </div> 
    </header> 

    .spl-for-link a 
    { 
    color:#ffffff; 

    } 

    .spl-for-link a:hover,a:focus 
    { 
    color:#ffffff; 
    }

來源

2017-01-02 06:30:35 user7357089

但是'.spl-for-link a'規則會將格式應用於'.spl-for-link'中任何**狀態的鏈接。在第二條規則中，「spl-for-link a：hover」將不會執行任何操作，因爲上面的規則中已經設置了顏色，並且'a：focus'部分將樣式應用於任何**重點關聯文檔中的任何位置。 – 2017-01-02 06:51:27

你是否改變了spl-for-link的顏色：懸停，並且重要的顏色來覆蓋CSS。 – user7357089

#amp-wp-header a:active, #amp-wp-header a:visited{color:#ffffff;} 
#amp-wp-header a:hover,#amp-wp-header a:focus{color:#ffffff;}

來源

2017-01-02 06:30:46

當然，但爲什麼我會把它寫成兩條單獨的規則呢？ – 2017-01-02 06:49:26

首先使用的是＃這是ID不上課。

使用這樣的事情：

.amp-wp-header > div a{ 
color: #fff; 
}

來源

2017-01-02 06:30:51 Shashi

但是，即使鏈接處於非活動狀態，訪問過程，懸停狀態或集中狀態，這也會應用顏色。 – 2017-01-02 06:40:53

@torazaburo你是對的，但我只是解釋它可以被目標休息的方式應該被相應地處理。 – Shashi

試試這個：

header.amp-wp-header a:active, 
header.amp-wp-header a:visited, 
header.amp-wp-header a:hover, 
header.amp-wp-header a:focus { 
    color:#ffffff 
}

來源

2017-01-02 06:34:33 Saeed

通常認爲最好的做法是**不**指定'header.amp-wp-header'中的標籤和類，因爲如果代碼決定爲頭元素使用不同的標籤或者使用不同的標籤該類別的其他元素。 – 2017-01-02 07:08:50

，但它影響了網頁上的所有鏈接。

#amp-wp-header a:active,a:visited{color:#ffffff;}a:hover,a:focus{color:#ffffff;}

如果重新格式化這個（並更改#到.指定一個類），你會得到

.amp-wp-header a:active,a:visited{color:#ffffff;} 
a:hover,a:focus{color:#ffffff;}

，您可以在第二個規則，你是清楚地看到，將顏色應用於全部盤旋或集中鏈接。

換句話說，第一個{color:#ffffff}終止規則。從a:hover開始的以下部分被解釋爲一個全新的獨立規則。它不受.amp-wp-header的影響，僅僅因爲它碰巧在同一條線上。

所以，你可能會認爲解決辦法是重寫你的CSS作爲一個規則，讓更高級別的選擇適用於所有僞類國家：

.amp-wp-header a:active, a:visited, a:hover, a:focus {color: #ffffff;}

然而，這並不工作，因爲.amp-wp-header只適用於a:active。「選擇器組」中的每個成員，有時稱爲「選擇器列表」，用逗號分隔的選擇器列表完全是獨立。換句話說，上面是完全等同於

.amp-wp-header a:active {color: #ffffff;} 
a:visited {color: #ffffff;} 
a:hover {color: #ffffff;} 
a:focus {color: #ffffff;}

將樣式應用到所有參觀，徘徊，或集中環節，而不僅僅是內部.amp-wp-header。因此，你需要把它寫成

.amp-wp-header a:active {color:#ffffff;} 
.amp-wp-header a:visited {color:#ffffff;} 
.amp-wp-header a:hover {color:#ffffff;} 
.amp-wp-header a:focus {color:#ffffff;}

對於這相當於是

.amp-wp-header a:active, 
.amp-wp-header a:visited, 
.amp-wp-header a:hover, 
.amp-wp-header a:focus { 
    color: #ffffff; 
}

注意，在未來的瀏覽器，你將能夠使用:matches如下：

.amp-wp-header a:matches(:active, :visited, :hover, :focus) { 
    color: #ffffff; 
}

更多詳情請參閱MDN page。有關兼容性，請參閱this chart。目前，您需要使用供應商前綴版本，例如-webkit-any或-moz-any，這使得它不太吸引人。

除了理解選擇器和選擇器組的工作方式外，這裏的一個教訓是仔細格式化和縮進CSS，以幫助您（和其他人）瞭解它的含義。

來源

2017-01-02 06:36:04

如何更改使用css類的鏈接的字體顏色？

回答

相關問題