css - 如何仅在某些 anchor 上应用 CSS

Question

我有一个包含 3 个页面的网站。

• > https://mywebsite.com/#
• > https://mywebsite.com/#features
• > https://mywebsite.com/#download

我想根据我所在的 anchor 更改一些 CSS。

这是我尝试做的事情、我得到的结果和我期望的例子。

#header-outer #social-in-menu a i::before{
    color: #000000;
}

这确实将社交按钮颜色更改为黑色，但在每个 anchor 上。我尝试用 a[href*="features"] 包装它，这样它只会在 #features 链接中发生变化，但社交图标保持白色。

这就是我试图实现的仅在#features anchor 中显示黑色的社交图标。

a[href*="features"] {
    #header-outer #social-in-menu a i::before{
        color: #000000;
    }
}

这个没有效果。没有任何改变。然而，CSS 的第一部分确实将图标更改为黑色，但在所有 anchor 上。

我怎样才能做到这一点？

我试图得到的最终结果是:

a[href*="features"] {
    #header-outer #social-in-menu a i::before{
        color: #000000; /* could be a different colour */
    }
}


a[href*="download"] {
    #header-outer #social-in-menu a i::before{
        color: #FFFFFF; /* could be a different colour */
    }
}

Answer 1

你可以这样做:

$(document).ready(function() {
  $(document).on("click", "a", function(e) {
    var id = $(this).attr("href").substring(1);
    $(".parent").attr("id", id);
  });
});

a {
  color: black;
}

#features a {
  color: red;
}

#download a {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <a href="#">Home</a>
  <a href="#features">Features</a>
  <a href="#download">Download</a>
</div>

这基本上是更新包装 anchor 的父元素的 id。此解决方案不使用 :target 并涉及使用 Javascript/Jquery。