：如果預定義目標不更改背景顏色

是否有原因導致此代碼無法正常工作，但下面的代碼無效。：如果預定義目標不更改背景顏色

不工作：

#contact { 
border-radius: 10px; 
max-width: 40%; 
margin: 2% 4%; 
float: left; 
padding-left: 2%; 
padding-bottom: 2%; 
color: black 
background-color: #CF8D56; 
} 

:target { 
background-color: #E6E6E6; 
color: black; 
margin-bottom: 20px; 
}

Codepen：http://codepen.io/anon/pen/QbWmbj

工作：

#contact { 
border-radius: 10px; 
max-width: 40%; 
margin: 2% 4%; 
float: left; 
padding-left: 2%; 
padding-bottom: 2%; 
color: black 
background-color: #CF8D56; 
} 

#contact:target { 
background-color: #E6E6E6; 
}

Codepen：http://codepen.io/anon/pen/RPwMNE

我不明白，爲什麼在最前一頁例子是不行的，因爲如果我不這樣做，定義#contact背景色它的工作原理：

工作：

#contact { 
border-radius: 10px; 
max-width: 40%; 
margin: 2% 4%; 
float: left; 
padding-left: 2%; 
padding-bottom: 2%; 
color: black 
} 

:target { 
background-color: #E6E6E6; 
color: black; 
margin-bottom: 20px; 
}

Codepen：http://codepen.io/anon/pen/KpKodM

的任何原因？

來源

2015-04-23 Ash

對這篇文章CSS特異性的讀取：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Shaggy

這是由於CSS特異性優先。通過元素ID定義規則的優先級高於通過僞選擇器定義規則的優先級。有關優先級的完整說明，請查詢this MDN article。

您可以通過添加important關鍵字來覆蓋優先級。在您的第一個示例中，將您的樣式規則更新爲

:target { 
    background-color: #E6E6E6 !important; 
}

它應該可以工作。

由於@BoltClock在他們的評論中正確指出，通常更好的方法是不要過度使用important關鍵字，並儘可能讓您的其他CSS選擇器更具體，就像您在第二支筆中所做的一樣。

簡短的回答：你已經有了正確的解決方案:)

來源

2015-04-23 10:18:35 thomaux

或者，您可以使用已經顯示的解決方案來解決問題：使用更具體的選擇器（如此處所述）。 – BoltClock

@BoltClock當然，只是指出有很多方法可以覆蓋默認行爲。在這種情況下制定更具體的規則絕對是更好的解決方案，我已經將其添加到我的答案中。 – thomaux

：如果預定義目標不更改背景顏色

回答

相關問題