CSS鏈接造型問題

Question

我一直在製作網站很多年了，這些東西真的讓我感到困惑，並且讓我感到困惑。

我在css文件中爲我的網站中的內容div設置了一個鏈接樣式，並且成功地設置了鏈接樣式。

但是，如果我在這個div內創建一個新的鏈接樣式的跨度或div，我最終不得不在!important中添加我只能通過試驗和錯誤才能知道的各種屬性。

有沒有辦法解決這個問題還是我做錯了什麼？

感謝

Answer 1

我的直覺是，你有你的選擇specificity問題。

確保您的新鏈接選擇器比封閉元素中的鏈接選擇器具有更高的特異性。通常情況下，這將意味着使用選擇像div.outerdiv div.innerdiv a.class而不僅僅是a.class等

例如：

<div class="outer"> 
    <a class="outerlink" href="#">Outer Link</a> 
    <div class="inner"> 
     <a class="innerlink" href="#">Inner Link</a> 
    </div> 
</div> 

如果您使用的這些選擇，你可能會遇到麻煩（根據CSS排序等）：

a.outerlink { **css here** } 
a.innerlink { **css here** } 

即使你使用了這些選擇，它不能保證工作，你怎麼想：

.outer a.outerlink {} 
.inner a.innerlink {} 

然而，這些選擇可以很好地工作，以確保您的innerlinks覆蓋屬性：

.outer a.outerlink {} 
.outer .inner a.innerlink {} 

確保指定所有要在.innerlink CSS覆蓋的屬性。

一旦你明白了特異性，power of the darkside將是你的。

Answer 2

我想我知道你指的是什麼，我通過在內部span或div css規則後面加上「a」來解決這個問題。 讓我們假設你有一個一般的規則：

a 
{ 
    color:white; 
} 

如果要覆蓋一個div這個規則，你必須寫

div a 
{ 
    color:yellow; 
} 

並不僅僅是

div 
{ 
    color:yellow; 
} 

這是因爲鏈接在div內，所以第一個規則比第三個鏈接強。