Question

我试图设置动态添加锚点的样式。

HTML：

<ul role="menu" aria-label="Pagination">
    <li><a href="#previous" role="menuitem">previous</a></li>
    <li><a href="#next" role="menuitem">nextstep</a></li>
</ul>

我试图做这样的事情：

a[href^='next']{display: none;}

并且像这样：

a[href='next']{display: none;}

但是他们都没有工作，我在谷歌上找不到任何有用的东西。

我无法像child那样在这个项目中使用CSS3，我也不想用javascript来解决这个问题。

这个问题有一个简单的CSS解决方案吗？一些帮助将不胜感激。

Answer 1

您错过了#字符：

a[href^='#next'] { display: none; }

此特定选择器还会匹配#next1234之类的内容，因为^=匹配属性开头的文本。如果您只想匹配 "#next"，那么您只想使用：

a[href='#next'] { display: none; }

Answer 2

<强> Demo

使用css属性选择器

a[href="#previous"] {
    color: green;
}
a[href="#next"] {
    color: red;
}

这里有很多例子

a[href*="#next"] /* attribute containing #next somewhere */
a[href^="#next"] /* attribute begins with #next */
a[href$="#next"] /* attribute ends with #next */
a[href~="#next"] /* #next is space separated in attribute */
a[href~="#next"] /* #next is dash separated in attribute */

Read this for more information

Answer 3

我相信你想要

a[href="#next"] { display:none; }

样式锚点由href

3 个答案: