html、css中的所有链接都有相同的悬停答案

【问题标题】：All links in html, css have the same hoverhtml、css中的所有链接都有相同的悬停
【发布时间】：2020-08-26 19:44:34
【问题描述】：

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

【问题讨论】：

也发布您的 HTML。
因此您为该特定链接添加了一个类。

标签： javascript html css visual-studio-code

【解决方案1】：

你可以通过不同的方式来解决这个问题。

您可以为您想要的每种不同的链接类型添加一个 css 类或 id 选择器：

/* 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; }
...

您还可以基于已知属性创建 css 选择器，这些属性将由您要定位的链接共享。

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

MDN: CSS Attribute Selectors

MDN: CSS Class Selectors

MDN: CSS ID Selectors

【讨论】：

【解决方案2】：

为每个元素指定一个说明符。

首先，检查您是否真的在设置a 标签而不是li 标签的样式。如果不是这种情况，请尝试提供类、id 或使用:nth-of-type css 伪元素。

是这样的：

menu{
  ul{
     li{
        a:nth-of-type(example number){
            background-color: red;
         }
       }
    }
}

希望这会有所帮助。

【讨论】：

另外，包含一段 HTML 文件，它使事情变得容易多了。请注意，在示例中，我使用的是 SCSS。

【解决方案3】：

如果您对所有链接使用相同的 ul li a，则网页将读取您的代码，就像您声明的所有链接一样。但就像丹木林所说的那样。尝试在 html 元素中使用类或选择器来为要声明其属性的元素提供标识。

【讨论】：