[英]How to change the default link style in css/html
I have set up the default style for all links on the site but then I want to have different style for links in sidebar.我已经为网站上的所有链接设置了默认样式,但是我想为侧边栏中的链接设置不同的样式。
On the sidebar, I put the following html:在侧边栏上,我输入了以下 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>
In css, I have the following code:在css,我有如下代码:
.toppost p {
background-color: #ffc531;
}
.toppost:hover p {
color: #ffc531 ;
background-color: #000 ;
text-decoration: underline ;
}
Then, when you look at the sidebar, part of the background color changes to what I set up for all p but the part with the link has the default color that is set up for whole site.然后,当您查看侧边栏时,部分背景颜色更改为我为所有 p 设置的颜色,但带有链接的部分具有为整个站点设置的默认颜色。
I have a basic knowledge of css and html and hopefully I managed to clearly explain this.我有 css 和 html 的基本知识,希望我能清楚地解释这一点。 If you have any idea how I can remove default style for links just for this section on the site, please let me know.如果您知道如何删除网站上此部分链接的默认样式,请告诉我。 I will much appreciate any help.我将不胜感激任何帮助。
Thank you!谢谢!
You probably set up the whole site default with a CSS target such as this:您可能将整个站点默认设置为 CSS 目标,如下所示:
a {
/* styles here */
}
But now you're only targeting the p
elements.但现在您只针对p
元素。 The sidebar links therefore still use the styles which are applied to them directly (the default styles from above) rather than the ones applied only to their parents, the p
elements in your sidebar.因此,侧边栏链接仍然使用直接应用于它们的 styles(上面的默认 styles),而不是仅应用于其父元素的链接,即侧边栏中的p
元素。
To solve this, change the CSS for your sidebar so that it also targets the links directly:要解决此问题,请更改侧边栏的 CSS,以便它也直接针对链接:
.toppost p a {
background-color: #ffc531;
}
.toppost:hover p a {
color: #ffc531 ;
background-color: #000 ;
text-decoration: underline ;
}
A more maintainable way is to CSS classes.一种更易于维护的方法是 CSS 个类。 There are countless ways to do this, one of which is BEM ( https://css-tricks.com/bem-101/ ).有无数种方法可以做到这一点,其中之一就是 BEM ( https://css-tricks.com/bem-101/ )。 It can help a lot as your structure grows.随着您的结构的增长,它可以提供很多帮助。
Also, follow the indication made in the comment: replace the "div" to an "ul", and each paragraph ("p") to a "li".此外,请按照评论中的指示:将“div”替换为“ul”,并将每个段落(“p”)替换为“li”。 This is more appropriate as it better represents the structure of your document.这更合适,因为它更好地代表了文档的结构。
HTML (original structure): 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 (recommended structure): 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 (the same for both): CSS(两者相同):
.toppost__link {
background-color: #ffc531;
}
.toppost:hover .toppost__link {
color: #ffc531 ;
background-color: #000 ;
text-decoration: underline ;
}
If you want to change the colour of a link then the selector you write must target the link and not just the paragraph containing the link.如果您想更改链接的颜色,那么您编写的选择器必须以链接为目标,而不仅仅是包含链接的段落。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.