如何为嵌套在多个div中的链接应用CSS样式规则？

我在HTML代码中创建了一个指向Ratings页面的链接，HTML结构如下：

<div class = "products">
    <div class = "container">
        <div class = "product-items">
            <div class = "product">
                <div class = "product-info">    
                    <div class = "product-info-top">
                        <a href="../ratings/ratings.html"><h2 class = "sm-title">Ratings</h2></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

已编写的基础CSS代码如下：

.product{
    margin: 2rem;
    position: relative;
}

.container{
    width: 88vw;
    margin: 0 auto;
}

.product-info{
    background: rgb(63, 34, 34);
    padding: 2rem;
}

.product-info-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sm-title{
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
}

但我尝试修改该链接的外观（如下划线、已访问状态颜色）时，以下CSS代码并未生效：

a{
   text-decoration: none;
}
a:visited{
   color: #somehexvalue;
}

我还尝试为该链接标签添加类来设置样式，但同样无效。请问如何为嵌套在多个div中的这个链接正确应用CSS样式规则？

样式不生效的核心原因是CSS优先级冲突，你的规则被其他更具体的样式覆盖了，以下是几种可行的解决方式：

1. 精准定位目标链接，提高选择器优先级 #

直接针对嵌套结构里的链接写更具体的选择器，确保优先级高于全局样式：

/* 定位到product-info-top容器内的链接 */
.product-info-top a {
  text-decoration: none;
}

/* 覆盖已访问状态的颜色 */
.product-info-top a:visited .sm-title {
  color: #your-hex-value; /* 替换成实际颜色值，比如#999 */
}

注：因为颜色样式实际作用在<h2>标签上，所以需要选中链接内的.sm-title类才能生效。

2. 给链接添加专属类，强化样式针对性 #

先修改HTML给链接加类名：

<a href="../ratings/ratings.html" class="rating-link"><h2 class = "sm-title">Ratings</h2></a>

再写对应的CSS规则：

.rating-link {
  text-decoration: none;
}

.rating-link:visited .sm-title {
  color: #your-hex-value;
}

如果还是被覆盖，可临时用!important强制生效（不推荐滥用，仅应急使用）：

.rating-link {
  text-decoration: none !important;
}

.rating-link:visited .sm-title {
  color: #your-hex-value !important;
}

3. 排查全局样式冲突 #

打开浏览器开发者工具（F12），选中目标链接查看样式面板，找到被划掉的规则，确认是被哪个更高优先级的样式覆盖了，再针对性调整选择器的复杂度（比如增加父类选择器）。

内容的提问来源于stack exchange，提问作者bd55