如何更改 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

如果您想更改链接的颜色，那么您编写的选择器必须以链接为目标，而不仅仅是包含链接的段落。