Question

我有一个3页的网站。

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

这是我正在尝试做的事情，得到的事情和期望的例子。

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

这确实将社交按钮的颜色更改为黑色，但是在每个锚点上。我尝试用a[href*="features"]包装它，以便它只会在#features链接中更改，而社交图标仍然是白色。

这就是我试图实现的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应用于某些锚点

1 个答案: