如何仅在某些锚点上应用 CSS

Question

我的网站有 3 个页面。

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

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

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

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

这就是我试图实现的 show social icons black only in #features anchor。

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

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

我怎样才能做到这一点？

我尝试得到的最终结果是：

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>

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

如何仅在某些锚点上应用 CSS

How to apply CSS only on certain anchors

css

anchor