javascript - html，css中的所有链接都有相同的悬停

Question

ul li a:hover{
    color: black;
}
/* Search Button */
.search_button{
    float: right;
    position: relative;
    bottom: 78px;
    margin-right: 10px;
    height: auto;
}
/* Middle Section */
/* Middle Section Main Picture */
.middle_section_image{
    display: block;
    margin: 1px auto;
    position: relative;
    bottom: 50px;
}
/* quote, explore */
.quote{
    text-align: center;
    position: relative;
    color: whitesmoke;
    bottom: 475px;
    font-size: 25px;
}
.explore{
    width: 80px;
    margin: auto;
    padding: 0px 30px;
    background-color: black;
    color: whitesmoke;
    text-align: center;
    border: 1px solid black;
    position: relative;
    border-radius: 30px;
    bottom: 475px;
}

这是我的 CSS 文件的一部分。我的文件中有很多链接，我想为它们添加不同的属性。但是，如果我将一个属性添加到一个链接，则相同的属性会添加到所有链接。我希望所有链接都有单独的属性

标签： javascripthtmlcssvisual-studio-code

Answer 1

There are different ways you could go about this.

You could add a css class or id selector for each of the different link types that you want to have:

/* class */
a.home-link { color: #000; }
a.home-link:hover { color: #00f; }
a.contact-link { color: #aaa; }
a.contact-link:hover { color: #0f0; }

/* id */
a#home-link { color: #000; }
a#contact-link { color: #aaa; }
...

You could also create css selectors based on known attributes that will be shared by links you want to target.

a[href="home.html"] { color: #000; }
a[href="contact.html"] { color: #000; }

MDN: CSS Attribute Selectors

MDN: CSS Class Selectors

MDN: CSS ID Selectors