如何更改 css/html 中的默認鏈接樣式

Question

我已經為網站上的所有鏈接設置了默認樣式，但是我想為側邊欄中的鏈接設置不同的樣式。

在側邊欄上，我輸入了以下 html：

<div class="toppost">

<p><a href="https:" rel="attachment noopener wp-att-222">Title 1</a></p>

<p><a href="https://" rel="attachment noopener wp-att-222">Title 2</a></p>

</div>

在css，我有如下代碼：

.toppost p {
    background-color: #ffc531;
}
.toppost:hover p {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

然后，當您查看側邊欄時，部分背景顏色更改為我為所有 p 設置的顏色，但帶有鏈接的部分具有為整個站點設置的默認顏色。

我有 css 和 html 的基本知識，希望我能清楚地解釋這一點。 如果您知道如何刪除網站上此部分鏈接的默認樣式，請告訴我。 我將不勝感激任何幫助。

謝謝！

Answer 1

您可能將整個站點默認設置為 CSS 目標，如下所示：

a {
  /* styles here */
}

但現在您只針對p元素。 因此，側邊欄鏈接仍然使用直接應用於它們的 styles（上面的默認 styles），而不是僅應用於其父元素的鏈接，即側邊欄中的p元素。

要解決此問題，請更改側邊欄的 CSS，以便它也直接針對鏈接：

.toppost p a {
    background-color: #ffc531;
}
.toppost:hover p a {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

Answer 2

一種更易於維護的方法是 CSS 個類。 有無數種方法可以做到這一點，其中之一就是 BEM ( https://css-tricks.com/bem-101/ )。 隨着您的結構的增長，它可以提供很多幫助。

此外，請按照評論中的指示：將“div”替換為“ul”，並將每個段落（“p”）替換為“li”。 這更合適，因為它更好地代表了文檔的結構。

HTML（原結構）：

<div class="toppost">

  <p><a href="https:" rel="attachment noopener wp-att-222" class="toppost__link">Title 1</a></p>

  <p><a href="https://" rel="attachment noopener wp-att-222" class="toppost__link">Title 2</a></p>

</div>

HTML（推薦結構）：

<ul class="toppost">

  <li><a href="https:" rel="attachment noopener wp-att-222" class="toppost__link">Title 1</a></li>

  <li><a href="https://" rel="attachment noopener wp-att-222" class="toppost__link">Title 2</a></li>

</ul>

CSS（兩者相同）：

.toppost__link  {
    background-color: #ffc531;
}
.toppost:hover .toppost__link {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

Answer 3

如果您想更改鏈接的顏色，那么您編寫的選擇器必須以鏈接為目標，而不僅僅是包含鏈接的段落。